<td>: Das Table Data Cell-Element

Dieses Element beinhaltet die globalen Attribute.

colspan

Beinhaltet einen nicht-negativen ganzzahligen Wert, der angibt, wie viele Spalten die Datenzelle überspannt oder erweitert. Der Standardwert ist 1. Benutzeragenten ignorieren Werte über 1000 als falsch und setzen sie auf den Standardwert (1).

headers

Beinhaltet eine Liste von durch Leerzeichen getrennten Zeichenfolgen, die jeweils dem id-Attribut der <th> Elemente entsprechen, die Überschriften für diese Tabellenzelle bereitstellen.

rowspan

Beinhaltet einen nicht-negativen ganzzahligen Wert, der angibt, für wie viele Reihen die Datenzelle überspannt oder erweitert. Der Standardwert ist 1; wenn sein Wert auf 0 gesetzt ist, erstreckt er sich bis zum Ende des Tabellenabschnitts (<thead>, <tbody>, <tfoot>, auch wenn dieser implizit definiert ist), zu dem die Zelle gehört. Werte über 65534 werden auf 65534 gekürzt.

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind nur dokumentiert, um vorhandenen Code zu aktualisieren und aus historischem Interesse.

abbr Veraltet

Enthält eine kurze abgekürzte Beschreibung des Inhalts der Datenzelle. Einige Benutzeragenten, wie Sprachleser, können diese Beschreibung vor dem eigentlichen Inhalt wiedergeben. Platzieren Sie den abgekürzten Inhalt innerhalb der Zelle und die (längere) Beschreibung im title Attribut, da dieses Attribut veraltet ist. Oder bevorzugen Sie es, den Inhalt in die Datenzelle einzubeziehen und verwenden Sie CSS, um überlaufenden Text visuell abzuschneiden.

align Veraltet

Gibt die horizontale Ausrichtung der Datenzelle an. Die möglichen enumerierten Werte sind left, center, right, justify, und char. Wenn unterstützt, richtet der char-Wert den Textinhalt an dem im char Attribut definierten Zeichen und dem im charoff Attribut definierten Versatz aus. Verwenden Sie stattdessen die text-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 angewendet wird.

bgcolor Veraltet

Bestimmt 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 die background-color CSS-Eigenschaft anstelle dieses Attributs, da es veraltet ist.

char Veraltet

Macht nichts. Es war ursprünglich gedacht, den Inhalt an einem Zeichen der Datenzelle auszurichten. Typische Werte hierfü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

Macht nichts. Es war ursprünglich dafür gedacht, die Anzahl der Zeichen anzugeben, um den Datenzelleninhalt vom im char Attribut angegebenen Ausrichtungszeichen zu versetzen.

height Veraltet

Definiert eine empfohlene Datenzellenhöhe. Verwenden Sie die height CSS-Eigenschaft, da dieses Attribut veraltet ist.

scope Veraltet

Definiert die Zellen, auf die sich die Kopfzelle (definiert im <th> Element) bezieht. Die möglichen enumerierten 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 Kopf ist, da dieses Attribut für das <td> Element veraltet ist.

valign Veraltet

Gibt die vertikale Ausrichtung der Datenzelle an. Die möglichen enumerierten Werte sind baseline, bottom, middle, und top. Verwenden Sie die vertical-align CSS-Eigenschaft stattdessen, da dieses Attribut veraltet ist.

width Veraltet

Definiert eine empfohlene Datenzellenbreite. Verwenden Sie die width CSS-Eigenschaft anstelle dieses Attributs, da es veraltet ist.

• Das <td> darf nur innerhalb eines <tr> Elements verwendet werden.

• Beim Verwenden der colspan und rowspan Attribute, um Datenzellen über mehrere Spalten und Zeilen hinweg zu erstrecken, werden Zellen ohne diese definierten Attribute (mit einem Standardwert von 1) automatisch in freiverfügbare Bereiche 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.

Sehen Sie <table> für ein vollständiges Tabellenbeispiel, das allgemeine Standards und Best Practices vorstellt.

Dieses Beispiel verwendet <td> Elemente zusammen mit anderen tabellenbezogenen Elementen, um eine einfache Tabelle mit Daten zum phonetischen Alphabet einzuführen.

HTML

Einige Tabellenzeilen (<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-Zelle ausgerichtet sind.

<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

Etwas grundlegendes CSS wird verwendet, um die Tabelle und ihre Zellen zu stylen. CSS Attributselektoren und die :nth-of-type Pseudoklasse werden verwendet, um das Erscheinungsbild der Zellen zu wechseln und das Verständnis 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;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

Ergebnis

Dieses Beispiel erweitert und verbessert die Grundtabelle aus dem vorherigen Beispiel durch das Hinzufügen einer zusätzlichen "ABC"-Zelle.

HTML

Eine zusätzliche Datenzelle (<td> Element) wird in die erste Reihe (<tr> Element) eingeführt. Dies erzeugt eine vierte Spalte in der Tabelle.

Durch das Verwenden des rowspan Attributs, wird die "ABC"-Zelle über die ersten drei Reihen der Tabelle erstreckt. Die letzten Datenzellen der folgenden Reihen überspannen jeweils zwei Spalten. Dies wird mit dem colspan Attribut erreicht und sie korrekt innerhalb der Tabellenstruktur ausgerichtet. Beachten Sie, dass der Tabelle eine zusätzliche Zeile (<tr> Element) hinzugefügt wurde, 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: white;
  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;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

Ergebnis

Für komplexere Beziehungen zwischen Datenzellen (<td> Elemente) und Kopfzellen (<th> Elemente), kann die Verwendung von <th> Elementen mit dem scope Attribut alleine für unterstützende Technologien, insbesondere Screen Reader, nicht ausreichend sein.

HTML

Um die Zugänglichkeit des vorherigen Beispiels zu verbessern und um Screen Readern z.B. die Möglichkeit zu geben, die Header zu lesen, die mit jeder Datenzelle verknüpft sind, kann das headers Attribut zusammen mit dem id Attribut eingeführt werden. Jede Zeilenkopfzelle (<th> Element), die mit der "ABC"-Datenzelle verbunden ist, d.h. die Buchstaben "A", "B" und "C", erhält mit dem id Attribut eine eindeutige Kennung. Die "ABC"-Datenzelle (<td> Element) verwendet dann diese id-Werte in einer durch Leerzeichen getrennten Liste für das headers Attribut.

<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 sich vom vorherigen Tabellenbeispiel nicht geändert hat, ist jede Datenzelle (<td>) jetzt explizit mit ihrer Zeilenkopfzelle (<th>) verknüpft.

• Lernen: Grundlagen der HTML-Tabellen
• <caption>, <col>, <colgroup>, <table>, <tbody>, <tfoot>, <th>, <thead>, <tr>: Andere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft zur Festlegung der Hintergrundfarbe jeder Datenzelle
• border: CSS-Eigenschaft zur Steuerung der Ränder von Datenzellen
• height: CSS-Eigenschaft zur Steuerung der empfohlenen Höhe der Datenzelle
• text-align: CSS-Eigenschaft zur horizontalen Ausrichtung des Inhalts jeder Datenzelle
• vertical-align: CSS-Eigenschaft zur vertikalen Ausrichtung des Inhalts jeder Datenzelle
• width: CSS-Eigenschaft zur Steuerung der empfohlenen Breite der Datenzelle
• :nth-of-type, :first-of-type, :last-of-type: CSS-Pseudoklassen, um die gewünschten Datenzellen auszuwählen