<td>: Das Tabellen-Data-Cellelement

Dieses Element enthält die globalen Attribute.

colspan

Enthält einen nicht-negativen Ganzzahlwert, der angibt, über wie viele Spalten die Datenzelle sich erstreckt. Der Standardwert ist 1. Benutzeragenten ignorieren Werte über 1000 als falsch und setzen sie auf den Standardwert (1).

headers

Enthält eine durch Leerzeichen getrennte Liste von Zeichenfolgen, von denen jede der id-Attribut von <th>-Elementen entspricht, die Überschriften für diese Tabellenzelle bereitstellen.

rowspan

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

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

abbr Veraltet

Enthält eine kurze Abkürzungsbeschreibung des Inhalts der Datenzelle. Einige Benutzeragenten, wie z. B. Sprachleser, können diese Beschreibung vor dem Inhalt selbst präsentieren. Setzen Sie den abgekürzten Inhalt innerhalb der Zelle und platzieren Sie die (längere) Beschreibung im title-Attribut, da dieses Attribut veraltet ist. Oder, vorzugsweise, den Inhalt innerhalb der Datenzelle einfügen und CSS verwenden, 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 char-Wert den Textinhalt am durch das char-Attribut definierten Zeichen und dem durch das charoff-Attribut definierten Versatz aus. Verwenden Sie stattdessen die text-align-CSS-Eigenschaft, da dieses Attribut veraltet ist.

axis Veraltet

Enthält eine durch Leerzeichen getrennte Liste von Zeichenfolgen, von denen jede der id-Attribut einer Gruppe von Zellen entspricht, 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 #-Präfix, oder ein Farbname. Andere CSS <color>-Werte werden nicht unterstützt. Verwenden Sie stattdessen die background-color-CSS-Eigenschaft, da dieses Attribut veraltet ist.

char Veraltet

Tut 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 Geldbeträge auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff Veraltet

Tut nichts. Es war ursprünglich dafür gedacht, die Anzahl der Zeichen zu spezifizieren, um die Datenzellinhalte vom Ausrichtungszeichen, das durch das char-Attribut angegeben wurde, zu versetzen.

height Veraltet

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

scope Veraltet

Definiert die Zellen, zu denen die Überschrift (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 als Header fungiert, 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 stattdessen die vertical-align-CSS-Eigenschaft, da dieses Attribut veraltet ist.

width Veraltet

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

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

• Wenn Sie die Attribute colspan und rowspan verwenden, um Datenzellen über mehrere Spalten und Zeilen zu erstrecken, werden Zellen ohne definierte Attribute (mit einem Standardwert von 1) automatisch in freie verfügbare Plätze in 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.

Siehe <table> für ein vollständiges Tabellenbeispiel, das gängige Standards und bewährte Praktiken vorstellt.

Dieses Beispiel verwendet <td>-Elemente zusammen mit anderen tabellenbezogenen Elementen, um eine grundlegende Tabelle mit Daten über das phonetische Alphabet vorzustellen.

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> den Zeilenüberschrift für die Datenzellen in dieser Zeile bereitstellt. Jedes entsprechende <td>-Element enthält Daten, die mit ihrer jeweiligen Spaltenüberschrift und Zeilenüberschrift-Zelle ü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

Ein wenig grundlegendes CSS wird verwendet, um die Tabelle und ihre Zellen zu gestalten. CSS-Attributselektoren und die :nth-of-type Pseudo-Klasse werden verwendet, um das Erscheinungsbild der Zellen abzuwechseln und 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 Grundtabelle aus dem vorherigen Beispiel durch 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.

Unter Verwendung des rowspan-Attributs wird die "ABC"-Zelle über die ersten drei Zeilen der Tabelle gespannt. Die letzten Datenzellen der folgenden Zeilen umfassen jeweils zwei Spalten. Dies wird mithilfe des colspan-Attributs erreicht, um sie korrekt innerhalb der Tabellenstruktur auszurichten. 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-Pseudo-Klassen 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>-Elementen) und Kopfzellen (<th>-Elementen) kann die Verwendung von <th>-Elementen mit dem scope-Attribut allein für unterstützende Technologien, insbesondere Bildschirmleser, nicht ausreichend sein.

HTML

Um die Barrierefreiheit des vorherigen Beispiels zu verbessern und damit Bildschirmleser beispielsweise die Überschriften aussprechen können, die mit jeder Datenzelle verbunden sind, kann das headers-Attribut zusammen mit den id-Attributen eingeführt werden. Jede Zeilenüberschriftszelle (<th>-Element), das 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 aus der vorherigen Beispielstabelle unverändert bleibt, wird jetzt jede Datenzelle (<td>) explizit mit ihrer Zeilenüberschrift (<th>) verknüpft.

• Lernen: Grundlagen von HTML-Tabellen
• <caption>, <col>, <colgroup>, <table>, <tbody>, <tfoot>, <th>, <thead>, <tr>: Andere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft zur Festlegung 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, um den Inhalt jeder Datenzelle horizontal auszurichten
• vertical-align: CSS-Eigenschaft, um den Inhalt jeder Datenzelle vertikal auszurichten
• width: CSS-Eigenschaft zur Steuerung der empfohlenen Breite der Datenzelle
• :nth-of-type, :first-of-type, :last-of-type: CSS-Pseudoklassen, um die gewünschten Datenzellen auszuwählen