<td>: Das Table Data Cell Element

Dieses Element beinhaltet die globalen Attribute.

colspan

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

headers

Enthält eine Liste von leerzeichen-getrennten Strings, 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, für wie viele Zeilen die Datenzelle überspannt oder erweitert wird. Der Standardwert ist 1; wenn der Wert auf 0 gesetzt wird, erstreckt sie sich bis zum Ende des Tabellenabschnitts (<thead>, <tbody>, <tfoot>, auch wenn implizit definiert), zu dem die Zelle gehört. Werte über 65534 werden auf 65534 begrenzt.

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

abbr Veraltet

Enthält eine kurze, abgekürzte Beschreibung des Inhalts der Datenzelle. Einige Benutzeragenten, wie z.B. Vorleser, 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 im title Attribut, da dieses Attribut veraltet ist. Oder, vorzugsweise, integrieren Sie den Inhalt in die Datenzelle und verwenden CSS, um den überlaufenden 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 auf das Zeichen aus, das im char Attribut definiert und durch den im charoff Attribut spezifizierten Versatz definiert wird. Verwenden Sie die text-align CSS-Eigenschaft stattdessen, da dieses Attribut veraltet ist.

axis Veraltet

Enthält eine Liste von leerzeichen-getrennten Strings, 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 # davor, oder ein Farb-Schlüsselwort. Andere CSS <color> Werte werden nicht unterstützt. Verwenden Sie die background-color CSS-Eigenschaft stattdessen, da dieses Attribut veraltet ist.

char Veraltet

Macht nichts. Es war ursprünglich vorgesehen, die Ausrichtung des Inhalts an einem Zeichen der Datenzelle zu spezifizieren. 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

Macht nichts. Es war ursprünglich vorgesehen, die Anzahl der Zeichen zum Ausrichten des Inhalts der Datenzelle vom Ausrichtungszeichen, das durch das char Attribut spezifiziert wird, festzulegen.

height Veraltet

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

scope Veraltet

Definiert die Zellen, auf die sich die Kopfzeile (definiert im <th>) 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 stattdessen, da dieses Attribut veraltet ist.

width Veraltet

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

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

• Wenn die colspan und rowspan Attribute verwendet werden, um Datenzellen über mehrere Spalten und Zeilen zu spannen, werden Zellen ohne diese Attribute (mit einem Standardwert von 1) automatisch in freie verfügbare Bereiche der Tabellenstruktur eingepasst, die 1x1 Zellen überschneiden, wie in der folgenden Abbildung dargestellt:

  

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

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

Dieses Beispiel verwendet <td> Elemente sowie andere Tabellenelemente, 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 innerhalb dieser Zeile bereitstellt. Jedes entsprechende <td> Element enthält Daten, die mit ihrer jeweiligen Spaltenüberschrift und Zeilenüberschriftzelle 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 gestalten. CSS Attributselektoren und die :nth-of-type Pseudoklasse werden verwendet, um das Erscheinungsbild der Zellen zu wechseln, um die Informationen in der Tabelle leichter verständlich und erkennbar zu machen.

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 das Hinzufügen einer zusätzlichen "ABC"-Zelle.

HTML

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

Unter Verwendung des rowspan Attributs wird die "ABC"-Zelle über die ersten drei Zeilen der Tabelle gespannt. Die letzten Datenzellen der nachfolgenden Zeilen spannen jeweils zwei Spalten. Dies wird mithilfe des colspan Attributs getan, 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 gestalten.

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 Bildschirmlesegeräte, nicht ausreichend sein.

HTML

Um die Zugänglichkeit des vorherigen Beispiels zu verbessern und um Bildschirmlesegeräten beispielsweise zu ermöglichen, die mit jeder Datenzelle verbundenen Kopfzellen zu sprechen, können das headers Attribut zusammen mit id Attributen eingeführt werden. Jede Zeilenkopfzelle (<th> Element), die mit der "ABC"-Datenzelle assoziiert ist, d.h. die Buchstaben "A", "B" und "C", erhält einen eindeutigen Bezeichner mit dem id Attribut. Die "ABC"-Datenzelle (<td> Element) verwendet dann diese id Werte in einer 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 unverändert gegenüber der vorherigen Beispielstabelle ist, ist jede Datenzelle (<td>) jetzt explizit mit ihrer Zeilenkopfzelle (<th>) assoziiert.

• Learn: HTML-Tabellen-Grundlagen
• <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 die Ränder von 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