HTML <tbody> Tag

Der <tbody>-Tag definiert den Rumpfinhalt (eine Menge von Zeilen) einer HTML-Tabelle und bildet darin einen separaten semantischen Block. Er wird zusammen mit den Tags <thead> und <tfoot> verwendet, die den Kopf- bzw. Fußbereich der Tabelle festlegen. Zusammen gliedern diese drei Elemente eine Tabelle in Kopf, Rumpf und Fuß – das macht den Quellcode lesbarer, leichter zu gestalten und barrierefrei zugänglich für unterstützende Technologien.

Der <tbody>-Tag muss als Kind-Element des <table>-Elements verwendet werden, nach <caption> und <colgroup> (falls vorhanden) sowie nach dem <thead>-Element. In HTML5 darf das <tfoot>-Element vor oder nach dem <tbody>-Element stehen – beides ist gültig, und <tfoot> wird unabhängig von seiner Position im Quellcode immer am Ende gerendert.

Warum `<tbody>` wichtig ist

Selbst wenn Sie den <tbody>-Tag nie schreiben, erstellt der Browser ihn für Sie. Wenn Sie <tr>-Zeilen direkt in ein <table>-Element einfügen, umschließt der Parser sie automatisch mit einem impliziten <tbody>. Das hat praktische Konsequenzen:

CSS-Selektoren. Wegen des impliziten <tbody> trifft ein Nachfahren-Selektor wie table > tbody > tr Zeilen auch dann, wenn Sie den Tag nicht geschrieben haben, während table > tr nichts trifft. Dieses Wissen verhindert verwirrende „Mein Selektor funktioniert nicht"-Fehler.
Zeilengruppierung. Eine Tabelle kann mehrere <tbody>-Elemente enthalten, sodass Sie eine lange Tabelle in logische Abschnitte (z. B. nach Jahr oder Kategorie) aufteilen können, die sich unabhängig voneinander gestalten und scrollen lassen.
DOM-Scripting. Jedes <table>-Element stellt in JavaScript eine tBodies-Kollektion bereit (table.tBodies[0]), die direkten Zugriff auf jede Rumpfgruppe ermöglicht, ohne durch untergeordnete Knoten zu navigieren.
Drucken. Wenn eine lange Tabelle mehrere gedruckte Seiten umfasst, wiederholen Browser <thead> und <tfoot> auf jeder Seite, während der Inhalt des <tbody>-Tags seitenweise weiterläuft.

Tipp

Die Elemente <thead>, <tbody> und <tfoot> beeinflussen das Tabellenlayout standardmäßig nicht. Verwenden Sie CSS-Eigenschaften, um das Aussehen der Tabelle anzupassen.

Beim Drucken eines Dokuments legen die Elemente <thead> und <tfoot> Informationen fest, 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> darf es keine <tr>-Elemente (Tabellenzeilen) geben, die direkte Kinder des <table>-Elements, aber nicht im <tbody> enthalten sind. Wenn Sie Zeilen verwenden, die weder Kopf- noch Fußzeilen sind, müssen diese innerhalb des <tbody>-Elements stehen.

Es können mehrere <tbody>-Elemente für jede Tabelle verwendet werden, solange sie alle aufeinanderfolgend sind. Dadurch werden die Zeilen großer Tabellen in Abschnitte unterteilt, und Sie können jeden Abschnitt separat formatieren.

Syntax

Der <tbody>-Tag wird paarweise verwendet. 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 des HTML `<tbody>`-Tags:

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>

Probier es selbst »

Ergebnis

Beispiel des HTML `<tbody>`-Tags 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>

Probier es selbst »

Beispiel mit mehreren `<tbody>`-Elementen

Sie können mehrere <tbody>-Elemente in einer Tabelle verwenden, um Zeilen in separate Abschnitte zu gruppieren. Hier bildet jedes Quartal eine eigene Rumpfgruppe, und jede Gruppe erhält ihre eigene Hintergrundfarbe:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 60%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666666;
        text-align: left;
      }
      thead {
        background-color: #1c87c9;
        color: #fff;
      }
      tbody:nth-of-type(odd) {
        background-color: #f3ebeb;
      }
      tbody:nth-of-type(even) {
        background-color: #e3f0fb;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>January</td>
          <td>500</td>
        </tr>
        <tr>
          <td>February</td>
          <td>1000</td>
        </tr>
      </tbody>
      <tbody>
        <tr>
          <td>March</td>
          <td>750</td>
        </tr>
        <tr>
          <td>April</td>
          <td>1200</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Barrierefreiheit

Die Elemente <tbody>, <thead> und <tfoot> helfen Screenreadern, die Struktur einer Tabelle zu vermitteln. Für maximale Barrierefreiheit kombinieren Sie diese Elemente mit Kopfzellen, die das Attribut scope verwenden, damit unterstützende Technologien ansagen können, zu welcher Kopfzeile eine Datenzelle gehört:

<table>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">January</th>
      <td>500</td>
    </tr>
  </tbody>
</table>

Verwenden Sie scope="col" für Spaltenüberschriften (typischerweise in <thead>) und scope="row" für Zeilenüberschriften im Rumpf.

Attribute

Attribut	Werte	Beschreibung
align	right left center justify char	Legt die Ausrichtung des Inhalts innerhalb des `<tbody>`-Elements fest. Wird in HTML5 nicht unterstützt
bgcolor	bgcolor	Setzt die Hintergrundfarbe der Zeilen innerhalb des `<tbody>`-Elements. Wird in HTML5 nicht unterstützt.
char	character	Legt die Ausrichtung des Inhalts im `<tbody>`-Element an einem Zeichen fest. Wird nur verwendet, wenn das Attribut align="char" gesetzt ist. Wird in HTML5 nicht unterstützt.
charoff	number	Gibt die Anzahl der Zeichen an, um die der Inhalt des `<tbody>`-Elements vom durch das char-Attribut festgelegten Zeichen versetzt wird. Wird nur verwendet, wenn das Attribut align="char" gesetzt ist. Wird in HTML5 nicht unterstützt.
valign	top bottom middle baseline	Legt die vertikale Ausrichtung des Inhalts innerhalb des `<tbody>`-Elements fest. Wird in HTML5 nicht unterstützt.

Der <tbody>-Tag unterstützt außerdem die globalen Attribute und die Ereignis-Attribute.

CSS-Ersatz für veraltete Attribute

Die oben genannten Präsentationsattribute sind in HTML5 veraltet. Verwenden Sie stattdessen CSS:

Altes Attribut	CSS-Ersatz
`align="center"`	`text-align: center;`
`valign="top"`	`vertical-align: top;`
`bgcolor="#eee"`	`background-color: #eee;`

So gestalten Sie einen HTML `<tbody>`-Tag

Sprechen Sie das <tbody>-Element direkt in Ihrem Stylesheet an, um dem Tabellenrumpf einen eigenen Hintergrund, Rahmen und eine eigene Zellenausrichtung zu geben:

tbody {
  background-color: #f3ebeb;
  border: 2px solid #1c87c9;
}

tbody td {
  text-align: center;
  vertical-align: top;
}

/* Zebra-stripe the body rows */
tbody tr:nth-of-type(even) {
  background-color: #e3f0fb;
}

Weitere Techniken finden Sie unter Tabellen mit CSS gestalten.

Übung

Was macht der HTML-tbody-Tag?

Er gruppiert die Inhaltszeilen einer HTML-Tabelle in einem Abschnitt.Er kann nicht mit CSS-Eigenschaften gestaltet werden.Er muss immer das erste Kind-Element des table-Elements sein.Er steht für den Hauptinhalt des gesamten Dokuments.Er ist um jede einzelne Zeile erforderlich, mit einer Zeile pro tbody.

Warum <tbody> wichtig ist

Syntax

Beispiel des HTML <tbody>-Tags:

Ergebnis

Beispiel des HTML <tbody>-Tags mit den Tags <thead> und <tfoot>:

Beispiel mit mehreren <tbody>-Elementen

Barrierefreiheit

Attribute

CSS-Ersatz für veraltete Attribute

So gestalten Sie einen HTML <tbody>-Tag

Übung

Warum `<tbody>` wichtig ist

Beispiel des HTML `<tbody>`-Tags:

Beispiel des HTML `<tbody>`-Tags mit den Tags `<thead>` und `<tfoot>`:

Beispiel mit mehreren `<tbody>`-Elementen

So gestalten Sie einen HTML `<tbody>`-Tag