<td>: Das Tabellendatenzellen-Element

Probieren Sie es aus

<table>
  <caption>
    Alien football stars
  </caption>
  <tr>
    <th scope="col">Player</th>
    <th scope="col">Gloobles</th>
    <th scope="col">Za'taak</th>
  </tr>
  <tr>
    <th scope="row">TR-7</th>
    <td>7</td>
    <td>4,569</td>
  </tr>
  <tr>
    <th scope="row">Khiresh Odo</th>
    <td>7</td>
    <td>7,223</td>
  </tr>
  <tr>
    <th scope="row">Mia Oolong</th>
    <td>9</td>
    <td>6,219</td>
  </tr>
</table>

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

th[scope="col"] {
  background-color: #505050;
  color: white;
}

th[scope="row"] {
  background-color: #d6ecd4;
}

td {
  text-align: center;
}

tr:nth-of-type(even) {
  background-color: #eeeeee;
}

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

caption {
  caption-side: bottom;
  padding: 10px;
}

Attribute

Dieses Element beinhaltet die globalen Attribute.

colspan

Enthält einen nichtnegativen ganzzahligen Wert, der angibt, wie viele Spalten die Datenzelle überspannt oder erweitert. Der Standardwert ist 1. Benutzeragenten ignorieren Werte, die höher als 1000 sind, und setzen den Wert auf den Standardwert (1).

headers

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

rowspan

Enthält einen nichtnegativen ganzzahligen Wert, der angibt, für wie viele Zeilen die Datenzelle überspannt oder erweitert. Der Standardwert ist 1; wenn der Wert auf 0 gesetzt ist, erstreckt er sich bis zum Ende des zum Zellenverband gehörenden Tabellengruppierungsabschnitts (<thead>, <tbody>, <tfoot>, auch wenn er implizit definiert ist). Werte, die höher als 65534 sind, werden auf 65534 begrenzt.

Veraltete Attribute

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind unten dokumentiert, um beim Aktualisieren vorhandener Codes zur historischen Interessenszwecken zu dienen.

abbr Veraltet

Enthält eine kurze, abgekürzte Beschreibung des Inhalts der Datenzelle. Einige Benutzeragenten, wie z.B. Sprachausgaben, 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. Vorzugsweise sollten Sie den Inhalt innerhalb der Datenzelle selbst einfügen und CSS verwenden, um den überschü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 der Wert char unterstützt wird, richtet er den Textinhalt auf das Zeichen aus, das im char-Attribut definiert ist, und den Offset, der durch das charoff-Attribut definiert ist. Verwenden Sie die CSS-Eigenschaft text-align, da dieses Attribut veraltet ist.

axis Veraltet

Enthält eine Liste von Leerzeichen-getrennten Zeichenfolgen, die jeweils der 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 Hexadezimal-RGB-Code, mit einem # versehen, oder ein Farbname. Andere CSS <color>-Werte werden nicht unterstützt. Verwenden Sie die CSS-Eigenschaft background-color, da dieses Attribut veraltet ist.

char Veraltet

Tut nichts. Es war ursprünglich gedacht, die Ausrichtung des Inhalts zu einem Zeichen der Datenzelle anzugeben. Typische Werte dafür sind ein Punkt (.), wenn versucht wird, Zahlen oder Geldwerte auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff Veraltet

Tut nichts. Es war ursprünglich gedacht, die Anzahl der Zeichen anzugeben, um den Datenzellinhalt vom Ausrichtungszeichen zu versetzen, das durch das char-Attribut angegeben wird.

height Veraltet

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

scope Veraltet

Definiert die Zellen, auf die sich die Überschrift (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 Überschrift 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 CSS-Eigenschaft vertical-align, da dieses Attribut veraltet ist.

width Veraltet

Definiert eine empfohlene Breite der Datenzelle. Verwenden Sie die CSS-Eigenschaft width, da dieses Attribut veraltet ist.

Nutzungshinweise

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

• Bei der Verwendung der Attribute colspan und rowspan, um Datenzellen über mehrere Spalten und Zeilen hinweg zu spannen, werden Zellen ohne diese Attribute (mit einem Standardwert von 1) automatisch in die freien verfügbaren Räume in der Tabellenstruktur eingefügt, die 1x1-Zellen umfassen, wie in der folgenden Abbildung gezeigt:

  

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

Beispiele

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

Grundlegende Datenzellen

Dieses Beispiel verwendet <td>-Elemente zusammen mit anderen tabellenbezogenen Elementen, um eine grundlegende Tabelle mit Daten über das phonetische 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 Zeile ist, bildet die erste Spalte der Tabelle, wobei jedes <th> die Zeilenüberschrift für die Datenzellen innerhalb dieser Zeile liefert. Jedes entsprechende <td>-Element enthält Daten, die mit ihrer jeweiligen Spaltenüberschrift und Zeilenüberschrift abgestimmt 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

Einige grundlegende CSS 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 zu verändern, um das Verständnis der Informationen in der Tabelle zu erleichtern und das Erkennen zu vereinfachen.

td,
th {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

tr:nth-of-type(odd) td {
  background-color: #eeeeee;
}

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

Spalten- und Zeilenspan

Dieses Beispiel erweitert und verbessert die grundlegende Tabelle aus dem vorherigen Beispiel, indem eine zusätzliche "ABC"-Zelle hinzugefügt wird.

HTML

Eine zusätzliche Datenzelle (<td>-Element) wird in die erste Zeile (<tr>-Element) eingefügt. Dies erstellt 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 mit dem colspan-Attribut durchgeführt, wodurch sie korrekt in 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 Pseudoklassen :first-of-type und :last-of-type werden im CSS verwendet, um die hinzugefügte "ABC"-Datenzelle auszuwählen und zu gestalten.

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: #eeeeee;
}

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

Datenzellen mit Kopfzellen assoziieren

Für komplexere Beziehungen zwischen Datenzellen (<td>-Elementen) und Kopfzellen (<th>-Elementen) kann die Verwendung von <th>-Elementen mit dem scope-Attribut allein für unterstützende Technologien, insbesondere Bildschirmlesegeräte, nicht ausreichend sein.

HTML

Um die Zugänglichkeit des vorherigen Beispiels zu verbessern und Bildschirmlesegeräten, zum Beispiel, die Möglichkeit zu geben, die mit jeder Datenzelle assoziierten Überschriften vorzulesen, kann das headers-Attribut zusammen mit id-Attributen eingeführt werden. Jede Zeilenkopfzelle (<th>-Element), die mit der "ABC"-Datenzelle in Verbindung steht, d.h. die Buchstaben "A", "B" und "C", erhält einen eindeutigen Bezeichner mit dem id-Attribut. Die "ABC"-Datenzelle (<td>-Element) verwendet diese id-Werte dann in einer Leerzeichengetrennten 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 unverändert gegenüber der vorherigen Beispieltabelle bleibt, ist jetzt jede Datenzelle (<td>) explizit mit ihrer Zeilenkopfzelle (<th>) verbunden.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Lernen: Grundlagen von HTML-Tabellen
• <caption>, <col>, <colgroup>, <table>, <tbody>, <tfoot>, <th>, <thead>, <tr>: Andere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft, um die Hintergrundfarbe jeder Datenzelle festzulegen
• border: CSS-Eigenschaft, um Grenzen der Datenzellen zu steuern
• height: CSS-Eigenschaft, um die empfohlene Höhe der Datenzelle zu steuern
• text-align: CSS-Eigenschaft, um den Inhalt jeder Datenzelle horizontal auszurichten
• vertical-align: CSS-Eigenschaft, um den Inhalt jeder Datenzelle vertikal auszurichten
• width: CSS-Eigenschaft, um die empfohlene Breite der Datenzelle zu steuern
• :nth-of-type, :first-of-type, :last-of-type: CSS-Pseudoklassen, um die gewünschten Datenzellen auszuwählen