<td>: Das Table Data Cell-Element

Probieren Sie es aus

<table>
  <caption>
    Alien football stars
  </caption>
  <thead>
    <tr>
      <th scope="col">Player</th>
      <th scope="col">Gloobles</th>
      <th scope="col">Za'taak</th>
    </tr>
  </thead>
  <tbody>
    <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>
  </tbody>
</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 enthält 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 ignorieren Werte über 1000 als falsch und setzen den Standardwert (1).

headers

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

Veraltete Attribute

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

abbr Veraltet

Enthält eine kurze, abgekürzte Beschreibung des Inhalts der Datenzelle. Einige Benutzeragenten, wie z.B. Sprachlesegeräte, können diese Beschreibung vor dem eigentlichen Inhalt 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 vorzugsweise, fügen Sie den Inhalt innerhalb der Datenzelle ein und verwenden Sie CSS, um ü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 an dem im char-Attribut definierten Zeichen und dem durch das charoff-Attribut festgelegten 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 zutrifft.

bgcolor Veraltet

Definiert die Hintergrundfarbe der Datenzelle. Der Wert ist eine HTML-Farbe; entweder ein 6-stelliger hexadezimaler RGB-Code, der mit einem # versehen ist, 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 dafür gedacht, die Ausrichtung des Inhalts an einem Zeichen der Datenzelle zu spezifizieren. Typische Werte hierfü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 dafür gedacht, die Anzahl der Zeichen anzugeben, um den Inhalt der Datenzelle vom durch das char-Attribut festgelegten Ausrichtungszeichen zu versetzen.

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>-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 Reihe oder Spalte zu definieren, für die es eine Kopfzeile darstellt, 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 stattdessen die vertical-align CSS-Eigenschaft, 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.

Nutzungshinweise

• 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 Attribute (mit einem Standardwert von 1) automatisch in freie verfü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.

Beispiele

Siehe <table> für ein vollständiges Tabellenbeispiel, das gängige 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 Tabellenreihen (<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 Reihenüberschrift für die Datenzellen in dieser Reihe bereitstellt. Jedes entsprechende <td>-Element enthält Daten, die mit ihrer jeweiligen Spaltenüberschrift und Reihenü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

Einige grundlegende 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 abzuwechseln, 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: #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 Reihenverbindung

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

HTML

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

Mit dem rowspan-Attribut wird die "ABC"-Zelle über die ersten drei Reihen der Tabelle gespannt. Die letzten Datenzellen der nachfolgenden Reihen erstrecken sich jeweils über zwei Spalten. Dies wird mit dem colspan-Attribut durchgeführt, wodurch sie korrekt innerhalb der Tabellenstruktur ausgerichtet werden. Beachten Sie, dass der Tabelle zur Veranschaulichung eine zusätzliche Zeile (<tr>-Element) hinzugefügt wird.

<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 in der 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: #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 verknüpfen

Für komplexere Beziehungen zwischen Datenzellen (<td>-Elemente) und Kopfzellen (<th>-Elemente) reicht das alleinige Verwenden von <th>-Elementen mit dem scope-Attribut möglicherweise nicht aus, um unterstützende Technologien, insbesondere Bildschirmlesegeräte, zu nutzen.

HTML

Um die Barrierefreiheit des vorherigen Beispiels zu verbessern und Bildschirmlesegeräten beispielsweise das Sprechen der Überschriften zu ermöglichen, die mit jeder Datenzelle verbunden sind, kann das headers-Attribut zusammen mit id-Attributen eingeführt werden. Jede Zeilenkopfzelle (<th>-Element), die 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 sich nicht vom vorherigen Beispiel ändert, ist jetzt jede Datenzelle (<td>) explizit mit ihrer Zeilenkopfzelle (<th>) verknüpft.

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 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