<td>: Das Table Data Cell-Element

Dieses Element enthält die globalen Attribute.

colspan

Enthält einen nicht-negativen ganzzahligen Wert, der angibt, über wie viele Spalten sich die Datenzelle erstreckt oder ausdehnt. Der Standardwert ist 1. Benutzeragenten ignorieren Werte größer als 1000 als falsch und setzen sie auf den Standardwert (1).

headers

Enthält eine Liste von leerzeichengetrennten Zeichenfolgen, die jeweils dem id-Attribut der <th>-Elemente entsprechen, die Überschriften für diese Tabellenzelle bereitstellen.

rowspan

Enthält einen nicht-negativen ganzzahligen Wert, der angibt, über wie viele Zeilen sich die Datenzelle erstreckt oder ausdehnt. Der Standardwert ist 1; wenn der Wert auf 0 gesetzt ist, erstreckt er sich bis zum Ende des Tabellengruppenabschnitts (<thead>, <tbody>, <tfoot>, auch wenn implizit definiert), zu dem die Zelle gehört. Werte größer als 65534 werden auf 65534 gekappt.

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind unten dokumentiert, um bei der Aktualisierung bestehender Codes und aus historischem Interesse als Referenz zu dienen.

abbr Veraltet

Enthält eine kurze, abgekürzte Beschreibung des Inhalts der Datenzelle. Einige Benutzeragenten, wie z.B. Sprachsynthese-Geräte, können diese Beschreibung vor dem eigentlichen Inhalt präsentieren. Setzen Sie den abgekürzten Inhalt in die Zelle und platzieren Sie die (längere) Beschreibung in das title Attribut, da dieses Attribut veraltet ist. Oder vorzugsweise den Inhalt in der Datenzelle belassen und CSS verwenden, um ü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 und char. Wenn char unterstützt wird, richtet der Wert den Textinhalt auf das Zeichen aus, das im char Attribut definiert ist, und den Offset, der durch das charoff Attribut definiert ist. Verwenden Sie stattdessen die text-align CSS-Eigenschaft, da dieses Attribut veraltet ist.

axis Veraltet

Enthält eine Liste von leerzeichengetrennten Zeichenfolgen, 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-stelliger hexadezimaler RGB-Code, mit einem # als Präfix, oder ein Farb-Schlüsselwort. 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 auf ein Zeichen der Datenzelle zu spezifizieren. Typische Werte beinhalten einen 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 anzugeben, um den Inhalt der Datenzelle vom Ausrichtungszeichen zu verschieben, das durch das char Attribut angegeben ist.

height Veraltet

Definiert eine empfohlene Datenzellenhöhe. 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 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 Ü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, und top. Verwenden Sie stattdessen die vertical-align CSS-Eigenschaft, da dieses Attribut veraltet ist.

width Veraltet

Definiert eine empfohlene Datenzellenbreite. Verwenden Sie stattdessen die width CSS-Eigenschaft, 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 zu erstrecken, werden Zellen ohne diese definierten Attribute (mit einem Standardwert von 1) automatisch in die frei verfügbaren 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.

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

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

HTML

Einige Tabellenzeilen (<tr> Elemente) enthalten sowohl Überschriftzellen (<th> Elemente) als auch <td> Datenzellen. Das <th> Element, das erstes Kind jeder Zeile ist, bildet die erste Spalte der Tabelle, wobei jede <th> als Zeilenüberschrift für die Datenzellen innerhalb dieser Zeile dient. Jedes entsprechende <td> Element enthält Daten, die mit seiner jeweiligen Spaltenüberschrift und Zeilenüberschrift 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

Ein wenig 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 alternieren und so das Verständnis und die Identifizierung 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ügt. Dies erzeugt eine vierte Spalte in der Tabelle.

Durch die Verwendung des rowspan Attributs wird die "ABC"-Zelle über die ersten drei Zeilen der Tabelle erstreckt. Die letzten Datenzellen der nachfolgenden Zeilen erstrecken sich jeweils über zwei Spalten. Dies erfolgt mittels des colspan Attributs, wodurch sie korrekt innerhalb der Tabellenstruktur ausgerichtet werden. Beachten Sie, dass der Tabelle eine zusätzliche Zeile (<tr> Element) 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;
}

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 Überschriftzellen (<th> Elemente) reicht die Verwendung von <th> Elementen mit dem scope Attribut allein möglicherweise nicht für unterstützende Technologien, insbesondere Bildschirmlesegeräte, aus.

HTML

Um die Zugänglichkeit des vorherigen Beispiels zu verbessern und z. B. Bildschirmlesegeräten die Möglichkeit zu geben, die mit jeder Datenzelle verknüpften Überschriften zu lesen, kann das headers Attribut zusammen mit id Attributen eingeführt werden. Jeder Zeilenkopf (<th> Element), der mit der "ABC"-Datenzelle verbunden 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 im Vergleich zur vorherigen Beispiel-Tabelle unverändert bleibt, ist jetzt jede Datenzelle (<td>) explizit mit ihrer Zeilenkopfzeile (<th>) verknüpft.

• Erlernen: Grundlagen der HTML-Tabelle
• <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 Datenzellenhöhe
• 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 Datenzellenbreite
• :nth-of-type, :first-of-type, :last-of-type: CSS-Pseudoklassen zur Auswahl der gewünschten Datenzellen