<td> HTML-Tabellendatenzellen-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 umfasst die globalen Attribute.

colspan

Enthält einen nicht-negativen ganzzahligen Wert, der angibt, über wie viele Spalten sich die Datenzelle erstreckt. Der Standardwert ist 1. Werte über 1000 werden auf 1000 begrenzt.

headers

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

rowspan

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

Veraltete Attribute

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind hier dokumentiert, um beim Aktualisieren bestehender Codes und aus historischem Interesse zu helfen.

abbr

Enthält eine kurze, abgekürzte Beschreibung des Inhalts der Datenzelle. Einige Benutzeragenten, z.B. Screenreader, können diese Beschreibung vor dem eigentlichen Inhalt präsentieren. Setzen Sie den abgekürzten Inhalt in die Zelle und die (längere) Beschreibung in das 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 zu beschneiden.

align

Gibt die horizontale Ausrichtung der Datenzelle an. Die möglichen enumerierten Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der Wert char den textuellen Inhalt an dem im char-Attribut definierten Zeichen und dem im charoff-Attribut definierten Versatz aus. Verwenden Sie die text-align CSS-Eigenschaft stattdessen, da dieses Attribut veraltet ist.

axis

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

bgcolor

Definiert die Hintergrundfarbe der Datenzelle. Der Wert ist eine HTML-Farbe; entweder ein 6-stelliger hexadezimaler RGB-Code, dem ein # vorangestellt ist, oder ein Farbenschlüsselwort. Andere CSS <color>-Werte werden nicht unterstützt. Verwenden Sie die background-color CSS-Eigenschaft stattdessen, da dieses Attribut veraltet ist.

char

Macht nichts. Es war ursprünglich dazu gedacht, die Ausrichtung des Inhalts an einem Zeichen der Datenzelle zu spezifizieren. Typische Werte hierfür umfassen einen Punkt (.) beim Versuch, Zahlen oder Währungswerte auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff

Macht nichts. Es war ursprünglich dazu gedacht, die Anzahl der Zeichen anzugeben, mit denen der Inhalt der Datenzelle vom im char-Attribut angegebenen Ausrichtungszeichen versetzt wird.

height

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

scope

Definiert die Zellen, auf die sich die Überschrift (definiert im <th>-Element) bezieht. Die möglichen enumerierten 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

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

width

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 definierten Attribute (mit einem Standardwert von 1) automatisch in freie verfügbare Räume in der Tabellenstruktur integriert, die 1x1-Zellen erstrecken, 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 Tabellenzeilen (<tr>-Elemente) enthalten sowohl Header-Zellen (<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 deren jeweiliger 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 und das Verständnis der Tabelleninformationen zu erleichtern.

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 Zeilenüberlappung

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 der ersten Zeile (<tr>-Element) eingeführt. Dies erstellt eine vierte Spalte in der Tabelle.

Mit dem rowspan-Attribut wird die "ABC"-Zelle über die ersten drei Zeilen der Tabelle verteilt. Die letzten Datenzellen der nachfolgenden Zeilen erstrecken sich jeweils über zwei Spalten. Dies wird mittels des colspan-Attributs erreicht, das diese korrekt innerhalb der Tabellenstruktur ausrichtet. Beachten Sie, dass eine zusätzliche Zeile (<tr>-Element) zur Tabelle 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 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

Verknüpfung von Datenzellen mit Kopfzellen

Für komplexere Beziehungen zwischen Datenzellen (<td>-Elementen) und Kopfzellen (<th>-Elementen) reicht die Verwendung von <th>-Elementen mit dem scope-Attribut allein möglicherweise nicht aus, um unterstützende Technologien, insbesondere Screenreader, zu unterstützen.

HTML

Um die Barrierefreiheit des vorherigen Beispiels zu verbessern und z.B. Screenreadern zu ermöglichen, die mit jeder Datenzelle assoziierten Überschriften vorzulesen, kann das headers-Attribut zusammen mit id-Attributen eingeführt werden. Jede Zeilenkopfzelle (<th>-Element) in Verbindung mit der "ABC"-Datenzelle, d.h. die Buchstaben "A", "B" und "C", erhält einen eindeutigen Bezeichner mittels des id-Attributs. 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 unverändert zum vorherigen Tabellenschema bleibt, ist jetzt jede Datenzelle (<td>) explizit mit ihrer Zeilenkopfzelle (<th>) verknüpft.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Lernen: 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 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