<tbody>

Zuletzt aktualisiert am 4. Februar 2026

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.

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 — 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

Einfache Tabelle mit explizitem tbody

Auch 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>

Mehrere tbody-Elemente für Gruppierung

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>

Zebra-Striping mit CSS

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

<tr> direkt in <table> ohne <tbody>: Auch wenn der Browser das toleriert und ein implizites <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>.

<thead> oder <tfoot> in <tbody>: Die drei Bereiche sind Geschwister-Elemente auf derselben Ebene innerhalb von <table>. Ein <thead> innerhalb von <tbody> ist ungültiges HTML. Die korrekte Reihenfolge ist: <thead> → <tbody> → <tfoot>.

nth-child zählt nur innerhalb des jeweiligen <tbody>: Wenn du mehrere <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

Das 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.

Email-Kompatibilität

Tabellen 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.

Verwandte Elemente