HTML <td> Tag
Das <td>-Tag definiert eine Standard-Datenzelle in einer HTML-Tabelle. Es muss als Kind-Element von <tr> verwendet werden.
Das <td>-Tag definiert eine Standard-Datenzelle in einer HTML-Tabelle. Es muss als Kind-Element von <tr> verwendet werden, das eine Tabellenzeile definiert. Zum Definieren einer Kopfzelle wird das <th>-Tag verwendet.
Das <td>-Tag kann Text, Formulare, Bilder, Tabellen usw. enthalten. Der Inhalt darin ist standardmäßig linksbündig ausgerichtet.
Wenn Sie tabellarische Daten in Tabellen darstellen, muss jede Datenzelle einzeln als <td>-Element hinzugefügt werden.
Alle Zeilen in der Tabelle enthalten eine gleiche Anzahl von Zellen, die der Anzahl der Zellen in der längsten Zeile entspricht. Wenn eine Zeile weniger Zellen enthält, füllt der Browser die Zeile automatisch auf und platziert leere Zellen am Ende.
Wenn Sie betonen möchten, dass in anderen Zellen keine Daten vorhanden sind, erstellen Sie dort, wo es nötig ist, eine Zelle ohne Inhalt.
Die vom Browser hinzugefügten Zellen haben keine Rahmen, und wenn sie aufeinander folgen, werden sie als eine zusammenhängende Zelle dargestellt.
Syntax
Das <td>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<td>) und dem schließenden (</td>) Tag geschrieben.
HTML <td>-Tag
<table>
<tr>
<td>...</td>
</tr>
</table>Beispiel des HTML <td>-Tags:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
tr {
background-color: lightgrey;
}
tr:first-child {
background-color: #1c87c9;
color: #fff;
}
th,
td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Date</th>
</tr>
<tr>
<td>March</td>
<td>10.09.2018</td>
</tr>
<tr>
<td>June</td>
<td>18.07.2018</td>
</tr>
</table>
</body>
</html>In diesem Beispiel verwenden wir das <tr>-Tag zum Definieren von Tabellenzeilen, <th> zum Definieren von Kopfzellen und <td> zum Definieren von Standard-Datenzellen.
Spalten und Zeilen überbrücken
Die Attribute colspan und rowspan werden häufig mit dem <td>-Tag verwendet, damit sich eine einzelne Zelle über mehrere Spalten oder Zeilen erstrecken kann.
colspanlegt fest, wie viele Spalten eine Zelle einnimmt. Der Wert muss eine positive ganze Zahl sein; der Standardwert ist1. Eine Zelle mitcolspan="2"nimmt den horizontalen Platz von zwei normalen Zellen ein, daher sollte die Zeile, zu der sie gehört, eine<td>weniger als die anderen Zeilen enthalten.rowspanlegt fest, wie viele Zeilen eine Zelle einnimmt. Der Wert muss eine positive ganze Zahl sein; der Standardwert ist1. Eine Zelle mitrowspan="2"erstreckt sich in die nächste Zeile hinein, sodass diese nächste Zeile die<td>weglassen sollte, die darunter stehen würde.
Achten Sie darauf, dass ein Span nicht größer ist, als die Tabelle zulässt. Wenn ein colspan oder rowspan über den Rand der Tabelle hinausgeht, begrenzen Browser ihn auf die verfügbaren Spalten oder Zeilen, anstatt neue hinzuzufügen. Umgekehrt gilt: Wenn Sie vergessen, die Zellen zu entfernen, die ein Span überlappt, hat die Zeile zu viele Zellen und das Tabellenlayout bricht zusammen.
Beispiel des HTML <td>-Tags mit dem colspan-Attribut:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
tr {
background-color: #e6ebef;
}
tr:first-child {
background-color: #1c87c9;
color: #fff;
}
tr:last-child {
height: 60px;
}
tr:last-child td {
background-color: #a3cced;
vertical-align: bottom;
}
tr:last-child span {
font-size: 14px;
}
th,
td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table>
<tr>
<th>Company e-mail</th>
<th>Date</th>
</tr>
<tr>
<td>
<a href="#">[email protected]</a>
</td>
<td>01.09.2017</td>
</tr>
<tr>
<td colspan="2">[email protected];
<strong>01.09.2017 </strong>
<span>(received date)</span>
</td>
</tr>
</table>
</body>
</html>Ergebnis
Beispiel des HTML <td>-Tags mit dem rowspan-Attribut:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 1px solid #666;
}
thead tr {
background-color: #1c87c9;
color: #fff;
}
tbody td {
background-color: #e6ebef;
}
.year {
background-color: #a3cced;
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Month</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>March</td>
<td class="year" rowspan="2">2014</td>
</tr>
<tr>
<td>April</td>
</tr>
</tbody>
</table>
</body>
</html>Zellen Überschriften für die Barrierefreiheit zuordnen
Bei einer einfachen Tabelle können Screenreader jede Datenzelle automatisch der zugehörigen Spalten- und Zeilenkopfzeile zuordnen. Bei einer komplexen Tabelle — mit mehreren Kopfzeilenebenen oder überbrückten Zellen — funktioniert diese automatische Zuordnung nicht mehr. Um solche Tabellen für assistive Technologien lesbar zu halten, versehen Sie jedes <th> mit einem id-Attribut und listen Sie die entsprechenden IDs im headers-Attribut jedes zugehörigen <td> auf. Eine Zelle kann auf mehrere Kopfzeilen verweisen, indem deren IDs mit Leerzeichen getrennt werden.
Beispiel des HTML <td>-Tags mit dem headers-Attribut:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-collapse: collapse;
margin: 30px auto;
}
th, td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table>
<tr>
<th id="name">Name</th>
<th id="hours">Hours</th>
<th id="rate">Rate</th>
</tr>
<tr>
<td headers="name">Ann</td>
<td headers="hours">38</td>
<td headers="rate">$25</td>
</tr>
<tr>
<td headers="name">Bob</td>
<td headers="hours">40</td>
<td headers="rate">$30</td>
</tr>
</table>
</body>
</html>Hier verweist jede Datenzelle auf die Kopfzeile, die sie beschreibt, sodass ein Screenreader beispielsweise „Rate: $25" anstatt nur „$25" ankündigen kann.
Layout-Probleme mit <td>
Standardmäßig richtet sich jede Datenzelle vertikal an den Zellen in derselben Spalte der anderen Zeilen aus. Das Hinzufügen einer zusätzlichen <td> zu nur einer Zeile stört diese Ausrichtung, weil jede folgende Zelle in dieser Zeile um eine Spalte verschoben wird.
Zum Beispiel hat diese Zeile drei Zellen, während der Rest der Tabelle nur zwei hat, sodass ihre Zellen nicht mehr unter den Kopfzeilen ausgerichtet sind:
<tr>
<th>Month</th>
<th>Total</th>
</tr>
<tr>
<td>March</td>
<td>Q1</td>
<td>120</td>
</tr>Die Lösung besteht darin, Zellen mit colspan zusammenzuführen, anstatt eine zusätzliche Spalte hinzuzufügen. Hier überspannt die „March"-Zelle beide Spalten über den Summen und hält das Raster ausgerichtet:
<tr>
<th>Month</th>
<th>Total</th>
</tr>
<tr>
<td colspan="2">March (Q1)</td>
</tr>
<tr>
<td>April</td>
<td>120</td>
</tr>Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| abbr | text | Definiert eine abgekürzte Version des Inhalts einer Zelle oder einen alternativen Text. (User-Agents, wie z. B. Screenreader, können diese Beschreibung vor dem eigentlichen Inhalt ausgeben). In HTML 5 nicht unterstützt. |
| align | left right center justify char | Richtet den Inhalt einer Zelle aus. In HTML 5 nicht unterstützt. |
| axis | category_name | Kategorisiert Zellen mit ähnlichem Inhalt. In HTML 5 nicht unterstützt. |
| background | background | Legt den Hintergrund einer Zelle fest. In HTML 5 nicht unterstützt. |
| bgcolor | rgb(x,x,x) #xxxxxx colorname | Definiert die Hintergrundfarbe einer Zelle. In HTML 5 nicht unterstützt. |
| bordercolor | bordercolor | Legt die Farbe des Rahmens fest. In HTML 5 nicht unterstützt. |
| char | character | Richtet den Inhalt einer Zelle an einem Zeichen aus. Wird nur verwendet, wenn das Attribut align="char" gesetzt ist. In HTML 5 nicht unterstützt. |
| charoff | number | Legt die Anzahl der Zeichen fest, um die der Inhalt vom durch das char-Attribut angegebenen Zeichen versetzt wird. Wird nur verwendet, wenn das Attribut align="char" gesetzt ist. In HTML 5 nicht unterstützt. |
| colspan | number | Definiert die Anzahl der Spalten, die eine Zelle umspannen soll. Der Attributwert muss eine positive ganze Zahl sein. Standardwert ist 1. |
| headers | header_id | Gibt eine oder mehrere Kopfzellen an (definiert durch das <th>-Tag), mit denen eine Standard-Datenzelle verknüpft ist. |
| height | % pixels | Legt die Höhe einer Zelle fest. In HTML 5 nicht unterstützt. |
| nowrap | nowrap | Gibt an, dass der Inhalt einer Zelle nicht umgebrochen werden soll. In HTML 5 nicht unterstützt. |
| rowspan | number | Gibt die Anzahl der Zeilen an, die eine Zelle umspannen soll. Der Attributwert muss eine positive ganze Zahl sein. Standardwert ist 1. Es wird nicht empfohlen, Werte über 65534 zu verwenden, da diese auf 65534 begrenzt werden. |
| valign | top middle bottom baseline | Gibt die vertikale Ausrichtung des Inhalts einer Zelle an. In HTML 5 nicht unterstützt. Verwenden Sie stattdessen die CSS-Eigenschaft vertical-align. |
| width | % pixels | Legt die Breite einer Zelle fest. In HTML 5 nicht unterstützt. |
Das <td>-Tag unterstützt die globalen Attribute und die Ereignis-Attribute.
Das scope-Attribut ist auf <td> nicht gültig; es gehört zum <th>-Element, wo es angibt, ob eine Kopfzeile für eine Spalte oder eine Zeile gilt. Verwenden Sie stattdessen headers auf einem <td>, um auf die zugehörigen Kopfzellen zu verweisen.
Wie man ein HTML <td>-Tag gestaltet
Die häufigsten <td>-Stile steuern Abstände, Rahmen und Ausrichtung. Verwenden Sie td zusammen mit th als Ziel, damit Kopf- und Datenzellen ein einheitliches Erscheinungsbild haben:
table {
border-collapse: collapse;
}
td {
padding: 10px;
border: 1px solid #666;
text-align: left;
vertical-align: middle;
}
td:hover {
background-color: #f1f7fb;
}Verwandte Tags
<table>— der Container, der alle Zeilen und Zellen enthält.<tr>— definiert eine Tabellenzeile; jedes<td>muss sich innerhalb einer befinden.<th>— definiert eine Kopfzelle, die über dasheaders-Attribut mit<td>verknüpft ist.