<tbody>
Das <tbody>-Element (Table Body) gruppiert die Datenzeilen einer Tabelle und trennt sie vom Kopfbereich (<thead>) und Fußbereich (<tfoot>). Auch wenn du <tbody> nicht explizit schreibst, fügt der Browser es automatisch ein: Jede <tr>, die nicht in <thead> oder <tfoot> steht, landet in einem impliziten <tbody>. Trotzdem solltest du es immer explizit schreiben, weil es die Tabellenstruktur klarer macht, gezieltes CSS-Styling ermöglicht und die Barrierefreiheit verbessert.
- Kategorie
- Tabellen
- Art
- Block
- Beispiele
- 3
- Browser
- 5 von 5
- 5 von 5
- Stand
- 04.02.2026
Grundlagen
<tbody> ist der Hauptbereich einer Tabelle und enthält die eigentlichen Dateninhalte. Zusammen mit <thead> und <tfoot> bildet es die drei semantischen Bereiche einer Tabelle. Eine Besonderheit: Du kannst mehrere <tbody> in einer Tabelle verwenden, um Datenzeilen in logische Gruppen aufzuteilen.
<tbody>steht nach<thead>und vor<tfoot>innerhalb von<table>- Es enthält
<tr>-Zeilen mit<td>-Datenzellen (und optional<th>für Zeilenüberschriften) - Mehrere
<tbody>pro Tabelle sind erlaubt und nützlich für thematische Gruppierung - Der Browser ergänzt ein implizites
<tbody>, wenn du keines schreibst - CSS-Selektoren wie
tbody tr:nth-child()zählen Zeilen nur innerhalb des jeweiligen<tbody> - Bei scrollbaren Tabellen kann
<tbody>per CSS unabhängig vom Kopf gescrollt werden
Syntax
<table>
<thead>
<tr>
<th>Name</th>
<th>Stadt</th>
</tr>
</thead>
<tbody>
<tr>
<td>Anna</td>
<td>Berlin</td>
</tr>
<tr>
<td>Ben</td>
<td>München</td>
</tr>
</tbody>
</table>Beispiele
3 BeispieleAuch bei einer einfachen Tabelle lohnt es sich, <tbody> explizit zu schreiben. Du kannst den Datenbereich dann gezielt stylen, zum Beispiel mit einer anderen Hintergrundfarbe als den Kopfbereich.
<table>
<thead>
<tr>
<th scope="col">Sprache</th>
<th scope="col">Paradigma</th>
<th scope="col">Typisierung</th>
</tr>
</thead>
<tbody>
<tr>
<td>JavaScript</td>
<td>Multi-Paradigma</td>
<td>Dynamisch</td>
</tr>
<tr>
<td>TypeScript</td>
<td>Multi-Paradigma</td>
<td>Statisch</td>
</tr>
<tr>
<td>Go</td>
<td>Imperativ</td>
<td>Statisch</td>
</tr>
</tbody>
</table>Du kannst mehrere <tbody>-Elemente in einer Tabelle verwenden, um Daten thematisch zu gruppieren. Das ist besonders nützlich bei langen Tabellen mit Kategorien.
<table>
<thead>
<tr>
<th scope="col">Tool</th>
<th scope="col">Beschreibung</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="2" scope="rowgroup">Frontend</th>
</tr>
<tr>
<td>React</td>
<td>UI-Komponentenbibliothek</td>
</tr>
<tr>
<td>Tailwind CSS</td>
<td>Utility-First CSS-Framework</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="2" scope="rowgroup">Backend</th>
</tr>
<tr>
<td>Express</td>
<td>Node.js Web-Framework</td>
</tr>
<tr>
<td>Fastify</td>
<td>Schnelles Node.js-Framework</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="2" scope="rowgroup">Datenbanken</th>
</tr>
<tr>
<td>PostgreSQL</td>
<td>Relationale Datenbank</td>
</tr>
<tr>
<td>Redis</td>
<td>In-Memory Key-Value Store</td>
</tr>
</tbody>
</table>Alternierend eingefärbte Zeilen verbessern die Lesbarkeit. Der CSS-Selektor tbody tr:nth-child() greift nur auf Zeilen innerhalb von <tbody> zu. Der Kopfbereich bleibt unberührt.
<style>
.striped-table tbody tr:nth-child(odd) {
background: #f9fafb;
}
.striped-table tbody tr:nth-child(even) {
background: white;
}
.striped-table tbody tr:hover {
background: #e0e7ff;
}
</style>
<table class="striped-table">
<thead>
<tr>
<th>Projekt</th>
<th>Status</th>
<th>Fortschritt</th>
</tr>
</thead>
<tbody>
<tr>
<td>Website Redesign</td>
<td>In Arbeit</td>
<td>75%</td>
</tr>
<tr>
<td>API Refactoring</td>
<td>Geplant</td>
<td>0%</td>
</tr>
<tr>
<td>Mobile App</td>
<td>In Arbeit</td>
<td>40%</td>
</tr>
<tr>
<td>Dokumentation</td>
<td>Abgeschlossen</td>
<td>100%</td>
</tr>
</tbody>
</table>Barrierefreiheit
Screenreader nutzen <tbody>, um den Datenbereich einer Tabelle vom Kopf- und Fußbereich zu unterscheiden. Nutzer können gezielt zum Datenbereich springen, ohne die Überschriften erneut durchgehen zu müssen. Das spart bei großen Tabellen erheblich Zeit.
Bei mehreren <tbody>-Elementen erkennen Screenreader die Gruppierungen und können diese als separate Bereiche ankündigen. In Kombination mit <th scope="rowgroup"> wird die thematische Zuordnung noch deutlicher.
Auch wenn der Browser ein implizites <tbody> ergänzt, ist die explizite Verwendung für assistive Technologien vorteilhafter, da sie eine klarere DOM-Struktur vorgibt.
Häufige Fehler
3 Fehler 01 <tr> direkt in <table> ohne <tbody>
<tbody> in den DOM einfügt, solltest du <tbody> immer explizit schreiben. Es macht deinen Code lesbarer und verbessert die Zusammenarbeit mit <thead> und <tfoot>. 02 <thead> oder <tfoot> in <tbody>
<table>. Ein <thead> innerhalb von <tbody> ist ungültiges HTML. Die korrekte Reihenfolge ist: <thead> → <tbody> → <tfoot>. 03 nth-child zählt nur innerhalb des jeweiligen <tbody>
<tbody>-Elemente verwendest, startet die Zählung von tr:nth-child() in jedem <tbody> von vorne. Das kann zu unerwartetem Zebra-Striping führen, wenn du nicht damit rechnest. Nutze dieses Verhalten gezielt für gruppenweise Formatierung. Browser-Kompatibilität
5 von 5Das tbody-Element wird von allen modernen und älteren Browsern vollständig unterstützt. Auch das implizite Einfügen durch den Browser und die Verwendung mehrerer tbody-Elemente funktionieren überall zuverlässig.
-
Chrome
Komplett
-
Firefox
Komplett
-
Safari
Komplett
-
Edge
Komplett
-
Opera
Komplett
Email-Kompatibilität
5 von 5Tabellen sind das Rückgrat von HTML-E-Mails, und tbody wird von allen großen Email-Clients vollständig unterstützt. Da E-Mail-Layouts fast ausschließlich auf Tabellen basieren, ist die Unterstützung besonders gut.
-
Apple Mail
Komplett
-
Gmail
Komplett
-
Outlook
Komplett
Tabellen sind die bevorzugte Layout-Methode in Outlook. tbody wird korrekt gerendert.
-
Thunderbird
Komplett
-
Yahoo Mail
Komplett
Newsletter
einmal die Woche, kostenlosNeue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.
Zuletzt verschickt · KW 40
Einmal alles neu, und die Lernplattform ist da