<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.
Das <td>
HTML-Element definiert eine Zelle einer Tabelle, die Daten enthält, und kann als Kind des <tr>
-Elements verwendet werden.
Probieren Sie es aus
Attribute
Dieses Element enthält die globalen Attribute.
colspan
-
Enthält einen nicht-negativen ganzzahligen Wert, der angibt, wie viele Spalten die Datenzelle übergreift oder erweitert. Der Standardwert ist
1
. Benutzeragenten ignorieren Werte höher als 1000 als falsch und setzen sie auf den Standardwert (1
). headers
-
Enthält eine Liste von leerzeichengetrennten Zeichenketten, die jeweils dem
id
-Attribut der<th>
-Elemente entsprechen, die Überschriften für diese Tabellenzelle liefern. rowspan
-
Enthält einen nicht-negativen ganzzahligen Wert, der angibt, für wie viele Zeilen die Datenzelle übergreift oder erweitert. Der Standardwert ist
1
; wenn ihr Wert auf0
gesetzt ist, erstreckt sie sich bis zum Ende des Tabellengruppierungsabschnitts (<thead>
,<tbody>
,<tfoot>
, auch wenn implizit definiert), zu dem die Zelle gehört. Werte höher als65534
werden auf65534
gekürzt.
Veraltete Attribute
Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie werden hier dokumentiert, um bestehende Codes zu aktualisieren und aus rein historischem Interesse.
abbr
Veraltet-
Enthält eine kurze, abgekürzte Beschreibung des Inhalts der Datenzelle. Einige Benutzeragenten, wie z.B. 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, vorzugsweise, fügen Sie den Inhalt innerhalb der Datenzelle ein und verwenden Sie CSS, um überlaufenden Text visuell zu verbergen. align
Veraltet-
Gibt die horizontale Ausrichtung der Datenzelle an. Die möglichen augezählten Werte sind
left
,center
,right
,justify
undchar
. Wenn unterstützt, richtet derchar
-Wert den Textinhalt am in derchar
-Attribut definierten Zeichen und dem imcharoff
-Attribut definierten Offset aus. Verwenden Sie stattdessen dietext-align
-CSS-Eigenschaft, da dieses Attribut veraltet ist. axis
Veraltet-
Enthält eine Liste von leerzeichengetrennten Zeichenketten, die jeweils dem
id
-Attribut einer Gruppe von Zellen entsprechen, auf die die Datenzelle angewendet wird. bgcolor
Veraltet-
Definiert die Hintergrundfarbe der Datenzelle. Der Wert ist eine HTML-Farbe; entweder ein 6-stelliger hexadezimaler RGB-Code, der von einem
#
gefolgt wird, oder ein Farbkeyword. Andere CSS<color>
-Werte werden nicht unterstützt. Verwenden Sie stattdessen diebackground-color
-CSS-Eigenschaft, da dieses Attribut veraltet ist. char
Veraltet-
Tut nichts. 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 versucht wird, Zahlen oder Geldbeträge auszurichten. Wennalign
nicht aufchar
gesetzt ist, wird dieses Attribut ignoriert. charoff
Veraltet-
Tut nichts. Es war ursprünglich dazu gedacht, die Anzahl der Zeichen anzugeben, um die der Datenzellinhalt vom Ausrichtungszeichen, das im
char
-Attribut spezifiziert wurde, verschoben werden soll. 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 der Header (definiert im
<th>
-Element) bezieht. Die möglichen augezählten 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 ein Header ist, da dieses Attribut für das<td>
-Element veraltet ist. valign
Veraltet-
Gibt die vertikale Ausrichtung der Datenzelle an. Die möglichen augezählten 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.
Nutzungshinweise
-
Das
<td>
-Element darf nur innerhalb eines<tr>
-Elements verwendet werden. -
Beim Verwenden der
colspan
- undrowspan
-Attribute, um Datenzellen über mehrere Spalten und Zeilen zu spannen, werden Zellen ohne diese definierten Attribute (mit einem Standardwert von1
) automatisch in freie verfügbare Bereiche in der Tabellenstruktur eingefügt, die 1x1-Zellen umfassen, wie in der folgenden Abbildung dargestellt:Hinweis: Diese Attribute dürfen nicht verwendet werden, um Zellen zu überlappen.
Beispiele
Sehen Sie sich <table>
für ein vollständiges Tabellenbeispiel an, das allgemeine Standards und bewährte Verfahren einführt.
Grundlegende Datenzellen
Dieses Beispiel verwendet <td>
-Elemente zusammen mit anderen tabellenbezogenen Elementen, um eine grundlegende Tabelle mit Daten zum phonetischen Alphabet einzuführen.
HTML
Einige Tabelleneilen (<tr>
-Elemente) enthalten sowohl Kopfzellen (<th>
-Elemente) als auch Datenzellen <td>
-Elemente. Das <th>
-Element, das das erste Kind jeder Reihe 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 ausgerichtet sind.
Hinweis: Normalerweise würde eine Tabellengruppen mit Spaltenüberschriften implementiert werden, um das Verständnis der Informationen in den Spalten zu erleichtern. Die <thead>
- und <tbody>
-Elemente würden verwendet werden, um solche Zeilen von Überschriften und Daten in die entsprechenden Tabellenkopf- und Tabellenkö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 wenig CSS wird verwendet, um die Tabelle und ihre Zellen zu stylen. CSS-Attributselektoren und die :nth-of-type
-Pseudoklasse werden verwendet, um das Aussehen der Zellen abzuwechseln, um das Verständnis und die Identifikation der Informationen in der Tabelle zu erleichtern.
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
Spannen von Spalten und Zeilen
Dieses Beispiel erweitert und verbessert die grundlegende Tabelle aus dem vorherigen Beispiel durch Hinzufügen eines zusätzlichen "ABC"-Feldes.
HTML
Eine zusätzliche Datenzelle (<td>
-Element) wird innerhalb der ersten Zeile (<tr>
-Element) eingefügt. Dies schafft eine vierte Spalte in der Tabelle.
Mithilfe des rowspan
-Attributs wird die "ABC"-Zelle über die ersten drei Zeilen der Tabelle gespannt. Die letzten Datenzellen der nachfolgenden Zeilen erstrecken sich jeweils über zwei Spalten. Dies wird mittels des colspan
-Attributs durchgeführt und sorgt dafür, dass sie korrekt in der Tabellenstruktur ausgerichtet sind. 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
-Pseudoklassen werden im CSS verwendet, um die hinzugefügte "ABC"-Datenzelle auszuwählen und zu stylen.
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 alleine die Verwendung von <th>
-Elementen mit dem scope
-Attribut für unterstützende Technologien, insbesondere Screenreader, nicht ausreichen.
HTML
Um die Barrierefreiheit des vorherigen Beispiels zu verbessern und beispielsweise Screenreadern zu ermöglichen, die mit jeder Datenzelle verknüpften Kopfzeilen zu sprechen, kann das headers
-Attribut zusammen mit id
-Attributen eingeführt werden. Jede Zeilenkopfzeile (<th>
-Element), die mit der "ABC"-Datenzelle verknüpft 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 leerzeichengetrennten Liste für das headers
-Attribut.
Hinweis: Es wird empfohlen, beschreibendere und nützlichere Werte für das id
-Attribut zu verwenden. Jedes id
in einem Dokument muss für dieses Dokument einzigartig 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 bleibt im Vergleich zur vorherigen Beispiel-Tabelle, ist nun jede Datenzelle (<td>
) explizit mit ihrer Zeilenkopfzeile (<th>
) verknüpft.
Technische Zusammenfassung
Content-Kategorien | Sectioning root. |
---|---|
Erlaubter Inhalt | Flow content. |
Tag-Auslassung |
Der Start-Tag ist obligatorisch. Der End-Tag kann weggelassen werden, wenn er sofort von einem <th> - oder einem
<td> -Element gefolgt wird oder wenn keine weiteren Daten in seinem übergeordneten Element vorhanden sind.
|
Erlaubte Eltern | Ein <tr> -Element. |
Implizierte ARIA-Rolle |
cell
wenn ein Nachkomme eines <table> -Elements
|
Erlaubte ARIA-Rollen | Beliebig |
DOM-Schnittstelle | [`HTMLTableCellElement`](/de/docs/Web/API/HTMLTableCellElement) |
Spezifikationen
Specification |
---|
HTML Standard # the-td-element |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- HTML-Tabellen lernen
<caption>
,<col>
,<colgroup>
,<table>
,<tbody>
,<tfoot>
,<th>
,<thead>
,<tr>
: Andere tabellenbezogene Elementebackground-color
: CSS-Eigenschaft, um die Hintergrundfarbe jeder Datenzelle festzulegenborder
: CSS-Eigenschaft zur Steuerung der Grenzen von Datenzellenheight
: CSS-Eigenschaft zur Steuerung der empfohlenen Höhe der Datenzelletext-align
: CSS-Eigenschaft zur horizontalen Ausrichtung des Inhalts jeder Datenzellevertical-align
: CSS-Eigenschaft zur vertikalen Ausrichtung des Inhalts jeder Datenzellewidth
: CSS-Eigenschaft zur Steuerung der empfohlenen Breite der Datenzelle:nth-of-type
,:first-of-type
,:last-of-type
: CSS-Pseudoklassen zur Auswahl der gewünschten Datenzellen