HTML-Tag <td>
Das <td>-Tag definiert eine Standard-Datenzelle in einer HTML-Tabelle. Es muss als Kindelement von <tr> verwendet werden, das eine Zeile in einer Tabelle definiert. Um eine Kopfzelle zu definieren, wird das Tag <th> verwendet.
Das <td>-Tag kann Text, Formulare, Bilder, Tabellen usw. enthalten. Der Inhalt darin ist standardmäßig linksbündig ausgerichtet.
TIP
Wenn Sie tabellarische Daten in Tabellen darstellen, muss jede Datenzelle einzeln als <td>-Element hinzugefügt werden.
Alle Zeilen in der Tabelle enthalten die gleiche Anzahl an Zellen, was 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.
TIP
Fortgeschrittenere Tabellen können die Elemente <caption>, <colgroup>, <col>, <tfoot>, <tbody> oder <thead> enthalten.
Wenn Sie betonen müssen, 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 direkt aufeinander folgen, werden sie als eine zusammenhängende Zelle angezeigt.
Syntax
Das <td>-Tag kommt paarweise vor. Der Inhalt wird zwischen dem öffnenden (<td>) und dem schließenden (</td>) Tag geschrieben.
HTML <td> Tag
<table>
<tr>
<td>...</td>
</tr>
</table>Beispiel für das HTML-<td>-Tag:
Monat und Datum|Beispiel für das HTML-<td>-Tag|W3Docs
<!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, um Tabellenzeilen zu definieren, <th>, um Kopfzellen zu definieren, und <td>, um Standard-Datenzellen zu definieren.
Die Attribute colspan und rowspan werden häufig mit dem <td>-Tag verwendet, damit sich der Inhalt über mehrere Spalten oder Zeilen erstrecken kann.
Beispiel für das HTML-<td>-Tag mit dem colspan-Attribut:
Firmen-E-Mail und Datum|Beispiel für das HTML-<td>-Tag|W3Docs
<!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;
}
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 style="height:60px;">
<td colspan="2" valign="bottom">[email protected];
<strong>01.09.2017 </strong>
<span>(received date)</span>
</td>
</tr>
</table>
</body>
</html>Ergebnis
Beispiel für das HTML-<td>-Tag mit dem rowspan-Attribut:
Beispiel mit rowspan-Attribut|HTML <td> Tag|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
th, td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table style="width:80%; margin:30px auto; border-collapse:collapse;">
<tr style="background-color:#1c87c9; color:#fff;">
<th>Month</th>
<th>Year</th>
</tr>
<tr>
<td style="background-color:#e6ebef;">March</td>
<td rowspan="2" style="background-color:#a3cced; text-align:center;">2014</td>
</tr>
<tr style="background-color:#e6ebef;">
<td style="background-color:#e6ebef;">April</td>
</tr>
</table>
</body>
</html><td>-Layout-Probleme
Standardmäßig werden Datenelemente in Tabellen vertikal so ausgerichtet, dass sie mit den Datenelementen in den vorherigen und folgenden Zeilen übereinstimmen. Wenn eine Tabelle beispielsweise vier Zeilen mit Datenzellen enthält, wird die erste Datenzelle jeder Zeile an der ersten Datenzelle der anderen Zeilen ausgerichtet. Und wenn Sie einer einzelnen Zeile ein zusätzliches <td>-Element hinzufügen, wirkt das Ergebnis unattraktiv. Mit Hilfe des colspan-Attributs können Sie dieses Problem lösen. Dabei wird den Zellen, die sich unterhalb und oberhalb der zusätzlichen Zelle befinden, mitgeteilt, dass sie sich über zwei Tabellen-Datenzellen erstrecken sollen.
Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| abbr | text | Definiert eine abgekürzte Version des Inhalts in einer Zelle oder einen alternativen Text. (Benutzeragenten wie Sprachausleser können diese Beschreibung vor dem eigentlichen Inhalt vorlesen). In HTML 5 nicht unterstützt. |
| align | left right center justify char | Richtet den Inhalt in 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 in 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 in einer Zelle an einem Zeichen aus. Wird nur verwendet, wenn das Attribut align="char" 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 aus ausgerichtet wird. Wird nur verwendet, wenn das Attribut align="char" ist. In HTML 5 nicht unterstützt. |
| colspan | number | Definiert die Anzahl der Spalten, über die sich eine Zelle erstrecken soll. Der Wert des Attributs sollte eine positive ganze Zahl sein. Der Standardwert ist 1. |
| headers | header_id | Gibt eine oder mehrere Kopfzellen an (definiert durch das <th>-Tag), zu denen eine Standardzelle gehört. |
| height | % pixels | Legt die Höhe einer Zelle fest. In HTML 5 nicht unterstützt. |
| nowrap | nowrap | Gibt an, dass der Inhalt innerhalb einer Zelle nicht umbrochen werden soll. In HTML 5 nicht unterstützt. |
| rowspan | number | Gibt die Anzahl der Zeilen an, über die sich eine Zelle erstrecken soll. Der Wert des Attributs sollte eine positive ganze Zahl sein. Der Standardwert ist 1. Es wird nicht empfohlen, Werte über 65534 zu verwenden, da sie auf 65534 begrenzt werden. |
| scope | col colgroup row rowgroup | Definiert die Zellen, auf die sich das Kopf-Element (definiert im <th>) bezieht. In HTML 5 nicht unterstützt. |
| valign | top middle bottom baseline | Gibt die vertikale Ausrichtung des Inhalts innerhalb einer Zelle an. In HTML 5 nicht unterstützt. |
| width | % pixels | Legt die Breite einer Zelle fest. In HTML 5 nicht unterstützt. |
Das <td>-Tag unterstützt die Global Attributes und die Event Attributes.
Wie man ein HTML-<td>-Tag stylt
{
"tag_name": "td"
}Practice
What are the attributes of the HTML <td> tag?