<td>: Das Table Data Cell-Element
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Das <td>
HTML Element definiert eine Zelle einer Tabelle, die Daten enthält und als Kind des <tr>
Elements verwendet werden kann.
Probieren Sie es aus
<table>
<caption>
Alien football stars
</caption>
<tr>
<th scope="col">Player</th>
<th scope="col">Gloobles</th>
<th scope="col">Za'taak</th>
</tr>
<tr>
<th scope="row">TR-7</th>
<td>7</td>
<td>4,569</td>
</tr>
<tr>
<th scope="row">Khiresh Odo</th>
<td>7</td>
<td>7,223</td>
</tr>
<tr>
<th scope="row">Mia Oolong</th>
<td>9</td>
<td>6,219</td>
</tr>
</table>
th,
td {
border: 1px solid rgb(160 160 160);
padding: 8px 10px;
}
th[scope="col"] {
background-color: #505050;
color: #fff;
}
th[scope="row"] {
background-color: #d6ecd4;
}
td {
text-align: center;
}
tr:nth-of-type(even) {
background-color: #eee;
}
table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
font-family: sans-serif;
font-size: 0.8rem;
letter-spacing: 1px;
}
caption {
caption-side: bottom;
padding: 10px;
}
Attribute
Dieses Element enthält die globalen Attribute.
colspan
-
Enthält einen nicht-negativen Ganzzahlwert, der angibt, wie viele Spalten die Datenzelle überspannt oder erweitert. Der Standardwert ist
1
. Benutzeragenten verwerfen Werte größer als 1000 als falsch und setzen den Wert auf den Standardwert (1
). headers
-
Enthält eine Liste von durch Leerzeichen getrennten Zeichenfolgen, die jeweils dem
id
-Attribut der<th>
Elemente entsprechen, die Überschriften für diese Tabellenzelle bereitstellen. rowspan
-
Enthält einen nicht-negativen Ganzzahlwert, der angibt, wie viele Zeilen die Datenzelle überspannt oder erweitert. Der Standardwert ist
1
; wenn der Wert auf0
gesetzt ist, erstreckt er sich bis zum Ende des Tabellenabschnitts (<thead>
,<tbody>
,<tfoot>
, auch bei impliziter Definition), zu dem die Zelle gehört. Werte größer als65534
werden auf65534
begrenzt.
Veraltete Attribute
Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind hier zu Referenzzwecken bei der Aktualisierung von bestehendem Code und aus historischem Interesse dokumentiert.
abbr
Veraltet-
Enthält eine kurze, abgekürzte Beschreibung des Inhalts der Datenzelle. Einige Benutzeragenten, wie beispielsweise Screenreader, können diese Beschreibung vor dem eigentlichen Inhalt präsentieren. Platzieren Sie den abgekürzten Inhalt innerhalb der Zelle und die (längere) Beschreibung im
title
-Attribut, da dieses Attribut veraltet ist. Oder besser, integrieren Sie den Inhalt innerhalb der Datenzelle und verwenden Sie CSS, um den überlaufenden Text visuell zu kürzen. align
Veraltet-
Gibt die horizontale Ausrichtung der Datenzelle an. Die möglichen aufzählbaren Werte sind
left
,center
,right
,justify
undchar
. Wenn unterstützt, richtet derchar
-Wert den Textinhalt am Zeichen aus, das imchar
-Attribut definiert ist, und am Offset, das durch dascharoff
-Attribut festgelegt wird. Verwenden Sie stattdessen dietext-align
CSS-Eigenschaft, da dieses Attribut veraltet ist. axis
Veraltet-
Enthält eine Liste von durch Leerzeichen getrennten Zeichenfolgen, die jeweils dem
id
-Attribut einer Gruppe von Zellen entsprechen, auf die die Datenzelle zutrifft. bgcolor
Veraltet-
Definiert die Hintergrundfarbe der Datenzelle. Der Wert ist eine HTML-Farbe; entweder ein 6-stelliger hexadezimaler RGB-Code, mit einem
#
vorangestellt, oder ein Farb-Schlüsselwort. Andere CSS<color>
Werte werden nicht unterstützt. Verwenden Sie stattdessen diebackground-color
CSS-Eigenschaft, da dieses Attribut veraltet ist. char
Veraltet-
Hat keine Funktion. Es war ursprünglich dazu gedacht, die Ausrichtung des Inhalts an einem Zeichen der Datenzelle zu spezifizieren. Typische Werte dafür sind ein Punkt (
.
), wenn man versucht, Zahlen oder Geldbeträge auszurichten. Wennalign
nicht aufchar
gesetzt ist, wird dieses Attribut ignoriert. charoff
Veraltet-
Hat keine Funktion. Es war ursprünglich dazu gedacht, die Anzahl der Zeichen zu spezifizieren, um die der Inhalt der Datenzelle vom Ausrichtungszeichen, das durch das
char
-Attribut festgelegt wird, versetzt ist. height
Veraltet-
Definiert eine empfohlene Höhe der Datenzelle. Verwenden Sie stattdessen die
height
CSS-Eigenschaft, da dieses Attribut veraltet ist. scope
Veraltet-
Definiert die Zellen, auf die sich die Überschrift (definiert im
<th>
) -Element bezieht. Die möglichen aufzählbaren Werte sindrow
,col
,rowgroup
undcolgroup
. Verwenden Sie dieses Attribut nur mit dem<th>
-Element, um die Zeile oder Spalte zu definieren, für die es eine Überschrift ist, da dieses Attribut für das<td>
-Element veraltet ist. valign
Veraltet-
Gibt die vertikale Ausrichtung der Datenzelle an. Die möglichen aufzählbaren Werte sind
baseline
,bottom
,middle
undtop
. Verwenden Sie stattdessen dievertical-align
CSS-Eigenschaft, da dieses Attribut veraltet ist. width
Veraltet-
Definiert eine empfohlene Breite der Datenzelle. Verwenden Sie stattdessen die
width
CSS-Eigenschaft, da dieses Attribut veraltet ist.
Verwendungsnotizen
-
Das
<td>
-Element darf nur innerhalb eines<tr>
-Elements verwendet werden. -
Wenn die
colspan
- undrowspan
-Attribute verwendet werden, um Datenzellen über mehrere Spalten und Zeilen zu überspannen, werden Zellen ohne diese Attribute (mit einem Standardwert von1
) automatisch in die frei verfügbaren Räume in der Tabellenstruktur eingefügt, die 1x1 Zellen überspannen, wie in der folgenden Abbildung dargestellt:Hinweis: Diese Attribute dürfen nicht verwendet werden, um Zellen zu überlappen.
Beispiele
Siehe <table>
für ein vollständiges Tabellenbeispiel mit allgemeinen Standards und Best Practices.
Grundlegende Datenzellen
Dieses Beispiel verwendet <td>
-Elemente zusammen mit anderen tabellenbezogenen Elementen, um eine einfache Tabelle mit Daten über das phonetische Alphabet vorzustellen.
HTML
Einige Tabellenspalten (<tr>
-Elemente) enthalten sowohl Header-Zellen (<th>
-Elemente) als auch Datenzellenelemente <td>
. Das <th>
-Element, das das erste Kind jeder Zeile ist, bildet die erste Spalte der Tabelle, wobei jedes <th>
die Zeilenüberschrift für die Datenzellen innerhalb dieser Zeile bereitstellt. Jedes entsprechende <td>
-Element enthält Daten, die mit seiner jeweiligen Spaltenüberschrift und Zeilenüberschrift übereinstimmen.
Hinweis:
Normalerweise würde eine Tabellenkopfgruppe mit Spaltenüberschriften implementiert werden, um das Verständnis der Informationen in den Spalten zu erleichtern. Die <thead>
- und <tbody>
-Elemente würden verwendet, um solche Überschriftenreihen und Daten in die entsprechenden Tabellenkopf- und Körperabschnitte zu gruppieren. Dies ist in diesem Beispiel nicht implementiert, um den Fokus auf die Datenzellen zu legen und die Komplexität dieses Beispiels zu reduzieren.
<table>
<tr>
<th scope="row">A</th>
<td>Alfa</td>
<td>AL fah</td>
</tr>
<tr>
<th scope="row">B</th>
<td>Bravo</td>
<td>BRAH voh</td>
</tr>
<tr>
<th scope="row">C</th>
<td>Charlie</td>
<td>CHAR lee</td>
</tr>
<tr>
<th scope="row">D</th>
<td>Delta</td>
<td>DELL tah</td>
</tr>
</table>
CSS
Ein grundlegendes CSS wird verwendet, um die Tabelle und ihre Zellen zu gestalten. CSS-Attributselektoren und die :nth-of-type
Pseudo-Klasse werden verwendet, um das Erscheinungsbild der Zellen abzuwechseln, um die Informationen in der Tabelle leichter verständlich und erkennbar zu machen.
td,
th {
border: 1px solid rgb(160 160 160);
padding: 8px 10px;
}
tr:nth-of-type(odd) td {
background-color: #eee;
}
tr th[scope="row"] {
background-color: #d6ecd4;
}
Ergebnis
Spalten- und Zeilenüberspannung
Dieses Beispiel erweitert und verbessert die Basistabelle aus dem vorherigen Beispiel durch Hinzufügen einer zusätzlichen „ABC“-Zelle.
HTML
Eine zusätzliche Datenzelle (<td>
-Element) wird in der ersten Zeile (<tr>
-Element) eingeführt. Dies schafft eine vierte Spalte in der Tabelle.
Mit dem rowspan
-Attribut wird die „ABC“-Zelle über die ersten drei Zeilen der Tabelle hinweg überspannt. Die letzten Datenzellen der nachfolgenden Zeilen überspannen jeweils zwei Spalten. Dies geschieht mit dem colspan
-Attribut und sie werden korrekt innerhalb der Tabellenstruktur ausgerichtet. Beachten Sie, dass eine zusätzliche Zeile (<tr>
-Element) zur Tabelle hinzugefügt wird, um dies zu veranschaulichen.
<table>
<tr>
<th scope="row">A</th>
<td>Alfa</td>
<td>AL fah</td>
<td rowspan="3">ABC</td>
</tr>
<tr>
<th scope="row">B</th>
<td>Bravo</td>
<td>BRAH voh</td>
</tr>
<tr>
<th scope="row">C</th>
<td>Charlie</td>
<td>CHAR lee</td>
</tr>
<tr>
<th scope="row">D</th>
<td>Delta</td>
<td colspan="2">DELL tah</td>
</tr>
<tr>
<th scope="row">E</th>
<td>Echo</td>
<td colspan="2">ECK oh</td>
</tr>
</table>
CSS
Die :first-of-type
und :last-of-type
Pseudo-Klassen werden im CSS verwendet, um die hinzugefügte „ABC“-Datenzelle auszuwählen und zu gestalten.
tr:first-of-type td:last-of-type {
width: 60px;
background-color: #505050;
color: #fff;
font-weight: bold;
text-align: center;
}
td,
th {
border: 1px solid rgb(160 160 160);
padding: 8px 10px;
}
tr:nth-of-type(odd) td {
background-color: #eee;
}
tr th[scope="row"] {
background-color: #d6ecd4;
}
Ergebnis
Datenzellen mit Header-Zellen verknüpfen
Für komplexere Beziehungen zwischen Datenzellen (<td>
-Elemente) und Header-Zellen (<th>
-Elemente) kann die Verwendung von <th>
-Elementen mit dem scope
-Attribut allein für unterstützende Technologien, insbesondere Screenreader, möglicherweise nicht ausreichend sein.
HTML
Um die Barrierefreiheit des vorherigen Beispiels zu verbessern und es beispielsweise Screenreadern zu ermöglichen, die mit jeder Datenzelle assoziierten Überschriften vorzulesen, kann das headers
-Attribut zusammen mit id
-Attributen eingeführt werden. Jede Zeilenüberschriftzelle (<th>
-Element), die der „ABC“-Datenzelle zugeordnet ist, d.h. die Buchstaben „A“, „B“ und „C“, erhält mit dem id
-Attribut einen eindeutigen Bezeichner. Die „ABC“-Datenzelle (<td>
-Element) verwendet dann diese id
-Werte in einer durch Leerzeichen getrennten Liste für das headers
-Attribut.
Hinweis:
Es wird empfohlen, aussagekräftigere und nützlichere Werte für das id
-Attribut zu verwenden. Jede id
in einem Dokument muss eindeutig in diesem Dokument sein. In diesem Beispiel sind die id
-Werte Einzelzeichen, um den Fokus auf das Konzept des headers
-Attributs zu legen.
<table>
<tr>
<th id="a" scope="row">A</th>
<td>Alfa</td>
<td>AL fah</td>
<td headers="a b c" rowspan="3">ABC</td>
</tr>
<tr>
<th id="b" scope="row">B</th>
<td>Bravo</td>
<td>BRAH voh</td>
</tr>
<tr>
<th id="c" scope="row">C</th>
<td>Charlie</td>
<td>CHAR lee</td>
</tr>
<tr>
<th scope="row">D</th>
<td>Delta</td>
<td colspan="2">DELL tah</td>
</tr>
<tr>
<th scope="row">E</th>
<td>Echo</td>
<td colspan="2">ECK oh</td>
</tr>
</table>
Ergebnis
Während das visuelle Ergebnis unverändert gegenüber der vorherigen Beispiel-Tabelle ist, ist jetzt jede Datenzelle (<td>
) explizit mit ihrer Zeilenüberschriftzelle (<th>
) verknüpft.
Technische Zusammenfassung
Inhaltskategorien | Untergliederungswurzel. |
---|---|
Erlaubter Inhalt | Flow-Inhalt. |
Tag-Auslassung |
Das Start-Tag ist obligatorisch. Das End-Tag kann weggelassen werden, wenn es unmittelbar von einem <th> - oder
<td> -Element gefolgt wird oder wenn es keine weiteren Daten in seinem Eltern-Element gibt.
|
Erlaubte Eltern | Ein <tr> -Element. |
Implizierte ARIA-Rolle |
cell
wenn es ein Nachkomme eines <table> -Elements ist, oder gridcell
wenn es ein Nachkomme eines Elements mit grid Rolle ist.
|
Erlaubte ARIA-Rollen | Beliebige |
DOM-Schnittstelle | [`HTMLTableCellElement`](/de/docs/Web/API/HTMLTableCellElement) |
Spezifikationen
Specification |
---|
HTML # the-td-element |
Browser-Kompatibilität
Siehe auch
- Erlernen: Grundlagen der HTML-Tabelle
<caption>
,<col>
,<colgroup>
,<table>
,<tbody>
,<tfoot>
,<th>
,<thead>
,<tr>
: Andere tabellenbezogene Elementebackground-color
: CSS-Eigenschaft, um die Hintergrundfarbe jeder Datenzelle einzustellenborder
: CSS-Eigenschaft, um die Ränder von Datenzellen zu ändernheight
: CSS-Eigenschaft, um die empfohlene Höhe der Datenzelle zu steuerntext-align
: CSS-Eigenschaft, um den Inhalt jeder Datenzelle horizontal auszurichtenvertical-align
: CSS-Eigenschaft, um den Inhalt jeder Datenzelle vertikal auszurichtenwidth
: CSS-Eigenschaft, um die empfohlene Breite der Datenzelle zu steuern:nth-of-type
,:first-of-type
,:last-of-type
: CSS-Pseudoklassen, um die gewünschten Datenzellen auszuwählen