HTML-<tbody>-Tag
Das <tbody>-Tag definiert den Body-Inhalt (eine Reihe von Zeilen) einer HTML-Tabelle und erstellt darin einen separaten semantischen Block. Das <tbody>-Tag wird zusammen mit den <thead>- und <tfoot>-Tags verwendet, die den Kopf- bzw. Fußbereich der Tabelle angeben.
Das <tbody>-Tag muss als Kind des <table>-Elements verwendet werden, nach den <caption>-, <colgroup>-Elementen (falls vorhanden) und den <thead>-Elementen. In HTML5 steht das <tfoot>-Element entweder vor oder nach dem <tbody>-Element.
TIP
Die Elemente <thead>, <tbody> und <tfoot> beeinflussen das Tabellenlayout standardmäßig nicht. Verwenden Sie CSS-Eigenschaften, um das Erscheinungsbild der Tabelle anzupassen.
Beim Drucken eines Dokuments definieren die Elemente <thead> und <tfoot> die Informationen, die auf jeder Seite einer mehrseitigen Tabelle gleich oder sehr ähnlich sein können, während der Inhalt des <tbody>-Tags von Seite zu Seite variiert.
Bei der Verwendung von <tbody> dürfen keine <tr>-Elemente (Tabellenzeilen) vorhanden sein, die Kinder des <table>-Elements sind, aber nicht innerhalb von <tbody> enthalten sind. Wenn Sie Zeilen ohne Kopf- und Fußbereich verwenden, müssen sie sich innerhalb des <tbody>-Elements befinden.
Es können mehr als ein <tbody>-Element pro Tabelle verwendet werden, solange sie alle aufeinanderfolgend sind. Dadurch werden die Zeilen in großen Tabellen in Abschnitte unterteilt, und Sie können jeden davon separat formatieren.
Syntax
Das <tbody>-Tag kommt paarweise vor. Der Inhalt wird zwischen dem öffnenden (<tbody>) und dem schließenden (</tbody>) Tag geschrieben.
HTML <tbody> Tag
<table>
<thead> ... </thead>
<tfoot> ... </tfoot>
<tbody>
<tr>
<td> ... </td>
</tr>
</tbody>
</table>Beispiel für das HTML-<tbody>-Tag:
HTML <tbody> Tag
<!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;">
<thead style="background-color:#1c87c9; color:#fff;">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot style="background-color:grey;">
<!-- <tfoot> is placed after <thead>, but is shown on the bottom of the table. -->
<tr>
<td>Total</td>
<td>1500</td>
</tr>
</tfoot>
<tbody style="background-color:lightgrey;">
<tr>
<td>January</td>
<td>500</td>
</tr>
<tr>
<td>February</td>
<td>1000</td>
</tr>
</tbody>
</table>
</body>
</html>Ergebnis
Beispiel für das HTML-<tbody>-Tag mit den Tags <thead> und <tfoot>:
HTML <tbody> Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 60%;
margin: 30px auto;
border-collapse: collapse;
}
thead {
background-color: #8ebf42;
color: #fff;
}
tbody {
background-color: #f3ebeb;
}
tfoot {
background-color: #ccc7c7;
}
th,
td {
padding: 10px;
border: 1px solid #666666;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>1500</td>
</tr>
<tr>
<td>February</td>
<td>1000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>2500</td>
</tr>
</tfoot>
</table>
</body>
</html>Attribute
| Attribut | Werte | Beschreibung |
|---|---|---|
| align | right left center justify char | Gibt die Ausrichtung des Inhalts innerhalb des <tbody>-Elements an. Wird in HTML5 nicht unterstützt |
| bgcolor | bgcolor | Legt die Hintergrundfarbe der Zeilen innerhalb des <tbody>-Elements fest. Wird in HTML5 nicht unterstützt. |
| char | character | Gibt die Ausrichtung des Inhalts innerhalb des <tbody>-Elements an einem Zeichen an. Wird nur verwendet, wenn das Attribut align="char" ist. Wird in HTML5 nicht unterstützt. |
| charoff | number | Gibt die Anzahl der Zeichen an, um die der Inhalt innerhalb des <tbody>-Elements vom durch das char-Attribut angegebenen Zeichen aus ausgerichtet wird. Wird nur verwendet, wenn das Attribut align="char" ist. Wird in HTML5 nicht unterstützt. |
| valign | top bottom middle baseline | Gibt eine vertikale Ausrichtung des Inhalts innerhalb des <tbody>-Elements an. Wird in HTML5 nicht unterstützt. |
Das <tbody>-Tag unterstützt außerdem die Global Attributes und die Event Attributes.
So stylen Sie ein HTML-<tbody>-Tag
{
"tag_name": "tbody"
}Practice
Was ist laut den auf w3docs.com bereitgestellten Informationen über das HTML-<tbody>-Tag richtig?