Eine Tabelle in HTML lässt sich besonders klar und strukturiert gestalten, wenn sie in drei Bereiche unterteilt wird: Kopfbereich (<thead>), Datenbereich (<tbody>) und Fußbereich (<tfoot>). Diese drei Elemente helfen, die Inhalte einer Tabelle logisch zu organisieren und klar zu trennen. Dadurch wird es sowohl für Nutzer als auch für Programme einfacher, die Daten zu verstehen.

Wozu dienen <thead>, <tbody> und <tfoot>?

• <thead> (Tabellenkopf):
  Dieser Abschnitt ist der obere Bereich der Tabelle. Meistens enthält er die Überschriften der Spalten.
  Tipp: Überschriften sollten mit dem <th>-Tag definiert werden, da dieser in der Regel als fett formatiert angezeigt wird und von Screenreadern als Spaltenname erkannt wird.
• <tbody> (Tabellenkörper):
  Hier kommen die eigentlichen Daten der Tabelle hin. Dieser Abschnitt bildet den Hauptteil der Tabelle und enthält in der Regel mehrere Zeilen mit Daten.
  Gut zu wissen: <tbody> ist immer implizit vorhanden, auch wenn es nicht angegeben ist.
• <tfoot> (Tabellenfuß):
  Der Fußbereich der Tabelle steht zwar optisch unten, aber im HTML-Code wird er direkt unter <thead> geschrieben – noch vor <tbody>. Der Grund dafür ist, dass Browser oft zuerst Kopf- und Fußdaten laden und darstellen. Damit bleiben wichtige Informationen, wie Summen oder Anmerkungen, sofort sichtbar, auch wenn der zentrale Teil der Tabelle (im <tbody>) groß ist.

Direkt anwendbare Attribute in HTML5

Die Tags <thead>, <tbody> und <tfoot> besitzen in HTML5 nur wenige, aber wichtige Attribute, um sie weiter anzupassen:

1. Global anwendbare Attribute

Diese Attribute sind keine spezifischen Attribute nur für <thead>, <tbody> und <tfoot>, sondern sie gehören zu den allgemeinen HTML-Attributen. Sie können auf jedes HTML-Element angewendet werden. Zu den globalen Attributen gehören:

• id: Um das Element eindeutig zu identifizieren, z. B. für JavaScript oder CSS.
• class: Zum Gruppieren, um CSS-Designs oder JavaScript-Funktionen gezielt anzuwenden.
• style: Zur direkten Verwendung von Inline-CSS (z. B. zur Formatierung).
• hidden: Um den Abschnitt unsichtbar zu machen.
• title: Zur Ergänzung von beschreibenden Informationen. Beim Überfahren mit der Maus wird der title-Text angezeigt.
• Aria-Attribute (wie role, aria-label): Für bessere Barrierefreiheit.

Beispiele zu globalen Attributen:

<table>
  <thead id="tabellenkopf" class="kopfdesign" style="background-color: #f0f0f0;">
    <tr>
      <th>Artikel</th>
      <th>Preis</th>
      <th>Verfügbarkeit</th>
    </tr>
  </thead>
  <tfoot class="zusammenfassung">
    <tr>
      <td colspan="3">Preise verstehen sich inkl. USt.</td>
    </tr>
  </tfoot>
<tbody class="dateninhalt">
    <tr>
      <td>Kaffeetasse</td>
      <td>5,99 €</td>
      <td>23</td>
    </tr>
  </tbody>
</table>

• Das <thead> erhält in diesem Fall die id="tabellenkopf" und eine CSS-Klasse kopfdesign.
• Der <tbody> ist mit einer Klasse dateninhalt versehen.
• Der <tfoot> hat die Klasse zusammenfassung.

Reihenfolge in HTML: Besonderheit <tfoot> vor <tbody>

Auch wenn es unlogisch erscheinen mag, der <tfoot>-Bereich steht im Code direkt unter <thead>, bevor der Inhalt im <tbody> folgt. Das hat einen praktischen Grund: Viele Browser laden zuerst den Header- und Footer-Inhalt und zeigen diese direkt an. Gerade bei großen Tabellen ist dies sinnvoll.

Beispiel einer korrekten Reihenfolge:

<table>
  <thead>
    <tr>
      <th>Spalte 1</th>
      <th>Spalte 2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="2">Hier steht die Fußzeile.</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Inhaltszeile 1</td>
      <td>Inhaltswert</td>
    </tr>
  </tbody>
</table>

Vorteile der semantischen Gliederung

1. Bessere Lesbarkeit:
   Browser, Screenreader und Menschen können den Inhalt leichter verstehen und gliedern.
2. Barrierefreiheit:
   Screenreader können klar unterscheiden, was z. B. Spaltennamen, Daten oder Zusatzinformationen (wie Summen) sind.
3. Wartbarkeit:
   Trennung von Kopf-, Daten- und Fußbereich macht es auch für Entwickler einfacher, eine Tabelle zu bearbeiten oder zu stylen.
4. Druckformat:
   Wenn eine große Tabelle über mehrere Seiten gedruckt wird, erscheinen die Kopf- und Fußzeile auf jeder Seite erneut.
5. Gestaltung:
   Mit CSS ist es möglich, Tabellen so zu gestalten, dass der Tabellenkörper separat von Kopf- und Fußzeile gescrollt werden kann.