<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 auf 0 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 als 65534 werden auf 65534 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 und char. Wenn unterstützt, richtet der char-Wert den Textinhalt am in der char-Attribut definierten Zeichen und dem im charoff-Attribut definierten Offset aus. Verwenden Sie stattdessen die text-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 die background-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. Wenn align nicht auf char 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 sind row, col, rowgroup und colgroup. 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 und top. Verwenden Sie stattdessen die vertical-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- und rowspan-Attribute, um Datenzellen über mehrere Spalten und Zeilen zu spannen, werden Zellen ohne diese definierten Attribute (mit einem Standardwert von 1) automatisch in freie verfügbare Bereiche in der Tabellenstruktur eingefügt, die 1x1-Zellen umfassen, wie in der folgenden Abbildung dargestellt:

    Abbildung, die das Spannen von Spalten und Zeilen der Tabellenzellen zeigt: Zellen 1, 3 und 4 spannen sich über zwei Zeilen; Zelle 2 über zwei Spalten; Zellen 5 und 6 passen in die verfügbaren Zellen, die die zweite und dritte Spalte in der zweiten Zeile sind.

    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.

html
<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.

css
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.

html
<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.

css
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.

html
<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