<td>: Das Table Data Cell-Element

Dieses Element umfasst die globalen Attribute.

colspan

Beinhaltet einen nicht-negativen Ganzzahlenwert, der angibt, wie viele Spalten die Datenzelle überspannt oder erweitert. Der Standardwert ist 1. Benutzeragenten behandeln Werte höher als 1000 als falsch und setzen den Standardwert (1).

headers

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

rowspan

Beinhaltet einen nicht-negativen Ganzzahlenwert, der angibt, für wie viele Zeilen die Datenzelle überspannt 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 sie implizit definiert ist), zu dem die Zelle gehört. Werte höher als 65534 werden auf 65534 beschränkt.

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind dokumentiert, um beim Aktualisieren vorhandenen Codes als Referenz zu dienen und aus historischem Interesse.

abbr Veraltet

Enthält eine kurze abgekürzte Beschreibung des Inhalts der Datenzelle. Einige Benutzeragenten, wie Screenreader, können diese Beschreibung vor dem Inhalt selbst präsentieren. Platzieren Sie den abgekürzten Inhalt in der Zelle und die (längere) Beschreibung im title-Attribut, da dieses Attribut veraltet ist. Oder bevorzugen Sie es, den Inhalt innerhalb der Datenzelle zu enthalten und verwenden Sie CSS, um den überflüssigen Text visuell abzuschneiden.

align Veraltet

Gibt die horizontale Ausrichtung der Datenzelle an. Die möglichen aufgezählten Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der char-Wert den Textinhalt am Zeichen aus, das im char-Attribut definiert ist und den Offset, der im charoff-Attribut definiert ist. Verwenden Sie die text-align CSS-Eigenschaft anstelle dieses Attributs, da dieses Attribut veraltet ist.

axis Veraltet

Enthält eine Liste von durch Leerzeichen getrennten Zeichenketten, die jeweils dem id-Attribut einer Gruppe von Zellen entsprechen, auf die sich die Datenzelle bezieht.

bgcolor Veraltet

Definiert die Hintergrundfarbe der Datenzelle. Der Wert ist eine HTML-Farbe; entweder ein 6-stelliges hexadezimales RGB, das mit einem # beginnt, oder ein Farbbegriff. Andere CSS <color>-Werte werden nicht unterstützt. Verwenden Sie stattdessen die background-color-CSS-Eigenschaft, da dieses Attribut veraltet ist.

char Veraltet

Macht nichts. Es war ursprünglich dazu gedacht, die Ausrichtung des Inhalts an einem Zeichen der Datenzelle zu spezifizieren. 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 dazu gedacht, die Anzahl der Zeichen zu spezifizieren, um den Datenzellinhalt vom Ausrichtungszeichen zu verschieben, das im char-Attribut angegeben ist.

height Veraltet

Definiert eine empfohlene Höhe der Datenzelle. Verwenden Sie die height-CSS-Eigenschaft anstelle dieses Attributs, da dieses Attribut veraltet ist.

scope Veraltet

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

valign Veraltet

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

width Veraltet

Definiert eine empfohlene Breite der Datenzelle. Verwenden Sie die width-CSS-Eigenschaft anstelle dieses Attributs, da dieses Attribut 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 spannen, werden Zellen ohne diese definierte Attribute (mit einem Standardwert von 1) automatisch in freie verfügbare Plätze in der Tabellenstruktur platziert, die 1x1 Zellen entsprechen, wie in der folgenden Abbildung veranschaulicht:

  

  Hinweis: Diese Attribute dürfen nicht verwendet werden, um Zellen zu überlappen.

Siehe <table> für ein vollständiges Tabellenbeispiel, das gebräuchliche Standards und bewährte Praktiken einführt.

Dieses Beispiel verwendet <td>-Elemente zusammen mit anderen tabellenbezogenen Elementen, um eine grundlegende Tabelle mit Daten über das phonetische Alphabet vorzustellen.

HTML

Einige Tabellenzeilen (<tr>-Elemente) enthalten sowohl Kopfzeilen (<th>-Elemente) als auch Datenzellen-<td>-Elemente. 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 in dieser Zeile bereitstellt. Jedes entsprechende <td>-Element enthält Daten, die mit seiner jeweiligen Spaltenüberschrift und Zeilenüberschrift übereinstimmen.

<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

Einige grundlegende CSS-Stile werden verwendet, um die Tabelle und ihre Zellen zu gestalten. CSS-Attributselektoren und die :nth-of-type-Pseudoklasse werden verwendet, um das Erscheinungsbild der Zellen abzuwechseln, um das Verstehen und Erkennen 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 grundlegende Tabelle 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 gespannt. Die letzten Datenzellen der nachfolgenden Zeilen spannen jeweils zwei Spalten. Dies geschieht durch die Verwendung des colspan-Attributs, das sie korrekt in der Tabellenstruktur ausrichtet. 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: #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;
}

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 allein für unterstützende Technologien, insbesondere Screenreader, unzureichend sein.

HTML

Um die Zugänglichkeit des vorherigen Beispiels zu verbessern und es Screenreadern beispielsweise zu ermöglichen, die mit jeder Datenzelle verknüpften Überschriften zu sprechen, kann das headers-Attribut zusammen mit den id-Attributen eingeführt werden. Jede Zeilenkopfzelle (<th>-Element), die mit der "ABC"-Datenzelle verknüpft ist, d.h. die Buchstaben "A", "B" und "C", erhält eine eindeutige Kennung mit dem id-Attribut. 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 nicht vom vorherigen Beispiel der Tabelle unterscheidet, wird nun jede Datenzelle (<td>) explizit mit ihrer Zeilenkopfzelle (<th>) verknüpft.

• Lernen: HTML-Tabellen
• <caption>, <col>, <colgroup>, <table>, <tbody>, <tfoot>, <th>, <thead>, <tr>: Andere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft zum Festlegen 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