<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 ignorieren Werte höher als 1000 als fehlerhaft und setzen sie auf den Standardwert (1).

headers

Enthält eine Liste von durch Leerzeichen getrennten Zeichenketten, 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. Der Standardwert ist 1; wenn der Wert auf 0 gesetzt ist, wird er bis zum Ende des Tabellengruppierungsabschnitts (<thead>, <tbody>, <tfoot>, auch wenn implizit definiert) erweitert, zu dem die Zelle gehört. Werte höher als 65534 werden auf 65534 gekürzt.

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind unten zur Referenz dokumentiert, wenn bestehender Code aktualisiert wird und aus historischem Interesse.

abbr Veraltet

Enthält eine kurze abgekürzte Beschreibung des Inhalts der Datenzelle. Einige Benutzeragenten, wie Bildschirmlesegeräte, können diese Beschreibung vor dem eigentlichen Inhalt anzeigen. Legen Sie den abgekürzten Inhalt in die Zelle und platzieren Sie die (längere) Beschreibung im title Attribut, da dieses Attribut veraltet ist. Bevorzugt sollte der Inhalt innerhalb der Datenzelle enthalten sein, und verwenden Sie CSS, um den überflüssigen Text visuell zu kürzen.

align Veraltet

Legt die horizontale Ausrichtung der Datenzelle fest. Die möglichen enumerierten Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der Wert char den Textinhalt am 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 Veraltet

Enthält eine Liste von durch Leerzeichen getrennten Zeichenketten, die jeweils dem id-Attribut einer Gruppe von Zellen entsprechen, für die die Datenzelle gilt.

bgcolor Veraltet

Definiert die Hintergrundfarbe der Datenzelle. Der Wert ist eine HTML-Farbe; entweder ein 6-stelliger hexadezimaler RGB-Code, mit einem # versehen, 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 dazu gedacht, die Ausrichtung des Inhalts an einem Zeichen der Datenzelle festzulegen. Typische Werte hierfür sind ein Punkt (.), wenn versucht wird, Zahlen oder monetäre Werte auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff Veraltet

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

height Veraltet

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

scope Veraltet

Definiert die Zellen, zu denen die Kopfzeile (definiert im <th>-Element) gehört. 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 Kopfzeile ist, da dieses Attribut für das <td>-Element veraltet ist.

valign Veraltet

Legt die vertikale Ausrichtung der Datenzelle fest. 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 Veraltet

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

• 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 spannen, werden Zellen ohne definierte Attribute (mit einem Standardwert von 1) automatisch in freie verfügbare Räume der Tabellenstruktur eingefügt, die 1x1 Zellen umfassen, wie in der folgenden Abbildung veranschaulicht:

  

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

Siehe <table>, um ein vollständiges Tabellenbeispiel mit allgemeinen Standards und bewährten Praktiken einzuführen.

In diesem Beispiel werden <td>-Elemente zusammen mit anderen tabellenbezogenen Elementen verwendet, 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 bereitstellt. Jedes entsprechende <td>-Element enthält Daten, die mit ihrer jeweiligen Spaltenüberschrift und Zeilenüberschrift-Zelle 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

Einfaches CSS wird verwendet, um die Tabelle und ihre Zellen zu stylen. CSS-Attributselektoren und die :nth-of-type Pseudo-Klasse werden verwendet, um das Aussehen der Zellen abzuwechseln und das Verständnis und die Identifikation der Informationen in der Tabelle zu erleichtern.

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

HTML

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

Mit dem rowspan-Attribut wird die "ABC"-Zelle über die ersten drei Zeilen der Tabelle gespannt. Die letzten Datenzellen der folgenden Zeilen spannen jeweils zwei Spalten. Dies wird durch das colspan-Attribut erreicht, das sie korrekt in der Tabellenstruktur ausrichtet. 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 Pseudo-Klassen werden im 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: #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>-Elementen) und Kopfzellen (<th>-Elementen) kann allein die Verwendung von <th>-Elementen mit dem scope-Attribut für unterstützende Technologien, insbesondere Bildschirmlesegeräte, möglicherweise nicht ausreichen.

HTML

Um die Barrierefreiheit des vorherigen Beispiels zu verbessern und damit Bildschirmlesegeräte beispielsweise die Überschriften zu jeder Datenzelle vorlesen können, kann das headers-Attribut zusammen mit id-Attributen eingeführt werden. Jede Zeilenkopfzelle (<th>-Element), die mit der "ABC"-Datenzelle, d.h. den Buchstaben "A", "B" und "C", verknüpft ist, erhält einen eindeutigen Bezeichner 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 unverändert vom vorherigen Beispiel bleibt, ist jetzt jede Datenzelle (<td>) explizit mit ihrer Zeilenkopfzelle (<th>) verknüpft.

• Lernen: HTML-Tabelle Grundlagen
• <caption>, <col>, <colgroup>, <table>, <tbody>, <tfoot>, <th>, <thead>, <tr>: Andere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft zum Setzen der Hintergrundfarbe jeder Datenzelle
• border: CSS-Eigenschaft zur Steuerung der Ränder von Datenzellen
• height: CSS-Eigenschaft zur Steuerung 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 Steuerung der empfohlenen Breite der Datenzelle
• :nth-of-type, :first-of-type, :last-of-type: CSS-Pseudoklassen zur Auswahl der gewünschten Datenzellen