<td>: Das Tabellen-Datenzellen-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 enthält die globalen Attribute.

colspan

Enthält einen nicht-negativen Ganzzahlwert, der angibt, wie viele Spalten die Datenzelle überspannt oder erweitert. Der Standardwert ist 1. Benutzeragenten verwerfen Werte, die höher als 1000 sind, als fehlerhaft und setzen diesen auf den Standardwert (1).

headers

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

rowspan

Enthält einen nicht-negativen Ganzzahlwert, 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 es sich bis zum Ende des Tabellengruppierungsbereichs (<thead>, <tbody>, <tfoot>, auch wenn implizit definiert), zu dem die Zelle gehört. Werte höher als 65534 werden auf 65534 abgeschnitten.

Veraltete Attribute

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind unten zur Orientierung bei der Aktualisierung bestehender Codes und aus historischem Interesse dokumentiert.

abbr Veraltet

Enthält eine kurze abgekürzte Beschreibung des Inhalts der Datenzelle. Einige Benutzeragenten, wie z.B. Sprachleser, 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. Oder bevorzugt, 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 enumerierten Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der Wert char den Textinhalt an dem im char-Attribut definierten Zeichen und dem im charoff-Attribut festgelegten Offset aus. Verwenden Sie die CSS-Eigenschaft text-align, da dieses Attribut veraltet ist.

axis Veraltet

Enthält eine Liste von durch Leerzeichen getrennten Strings, die jeweils dem id-Attribut einer Gruppe von Zellen entsprechen, auf die die Datenzelle zutrifft.

bgcolor Veraltet

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

char Veraltet

Hat keine Funktion. Es war ursprünglich vorgesehen, die Ausrichtung des Inhalts an einem Zeichen der Datenzelle zu spezifizieren. Typische Werte hierfür sind ein Punkt (.), wenn versucht wird, Zahlen oder Geldbeträge auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff Veraltet

Hat keine Funktion. Es war ursprünglich vorgesehen, die Anzahl der Zeichen anzugeben, die den Inhalt der Datenzelle vom Ausrichtungszeichen, das im char-Attribut angegeben ist, versetzt.

height Veraltet

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

scope Veraltet

Bestimmt 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 die 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 enumerierten 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.

Anwendungshinweise

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

• Bei Verwendung der colspan- und rowspan-Attribute, um Datenzellen über mehrere Spalten und Zeilen zu erweitern, werden Zellen ohne diese definierten Attribute (mit einem Standardwert von 1) automatisch in freie verfügbare Räume innerhalb der Tabellenstruktur eingefügt, die 1x1 Zellen überspannen, 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 Best Practices 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 Überschriftenzellen (<th>-Elemente) als auch <td>-Datenzellen. Das <th>-Element, das das erste Kind jeder Zeile ist, bildet die erste Spalte der Tabelle, wobei jede <th>-Zelle 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 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 abzuwechseln, um die Informationen in der Tabelle einfacher zu verstehen und zu identifizieren.

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

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

HTML

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

Durch die Verwendung des rowspan-Attributs wird die "ABC"-Zelle über die ersten drei Zeilen der Tabelle erweitert. Die letzten Datenzellen der nachfolgenden Zeilen überspannen jeweils zwei Spalten. Dies wird durch das colspan-Attribut erreicht, das sie innerhalb der Tabellenstruktur korrekt ausrichtet. Beachten Sie, dass eine zusätzliche Zeile (<tr>-Element) zur Tabelle hinzugefügt wurde, 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: 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 Überschriftenzellen in Beziehung setzen

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

HTML

Um die Zugänglichkeit des vorherigen Beispiels zu verbessern und um beispielsweise Bildschirmlesern zu ermöglichen, die mit jeder Datenzelle verknüpften Überschriften zu lesen, kann das headers-Attribut zusammen mit id-Attributen eingeführt werden. Jede Zeilenüberschriftzelle (<th>-Element), die mit der "ABC"-Datenzelle assoziiert 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

Obwohl sich das visuelle Ergebnis nicht von der vorherigen Beispiel-Tabelle ändert, ist nun jede Datenzelle (<td>) explizit mit ihrer Zeilenüberschriftzelle (<th>) assoziiert.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Lernen: HTML Tabellen Grundlagen
• <caption>, <col>, <colgroup>, <table>, <tbody>, <tfoot>, <th>, <thead>, <tr>: Andere tabellenverwandte Elemente
• background-color: CSS-Eigenschaft, um die Hintergrundfarbe jeder Datenzelle festzulegen
• border: CSS-Eigenschaft zur Steuerung der Rahmen von Datenzellen
• height: CSS-Eigenschaft zur Kontrolle der empfohlenen Höhe der Datenzelle
• 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 Kontrolle der empfohlenen Breite der Datenzelle
• :nth-of-type, :first-of-type, :last-of-type: CSS-Pseudoklassen zur Auswahl der gewünschten Datenzellen