0Pricing
HTML Academy · Lektion

Struktur von thead, tbody und tfoot

Organisieren Sie Tabellenzeilen in semantischen Kopf-, Haupt- und Fußbereichen.

Struktur von thead, tbody und tfoot ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Abschnitte einer Tabelle

Eine vollständige HTML-Tabelle hat drei optionale, aber empfohlene Abschnitte:

  • <thead> – Kopfzeilen
  • <tbody> – Inhaltszeilen (Hauptdaten)
  • <tfoot> – Fußzeilen (Summen, Zusammenfassungen)

thead

Das Element <thead> umfasst die Kopfzeilen:

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Quantity</th>
      <th>Price</th>
    </tr>
  </thead>
  ...
</table>
<!-- thead rows repeat when printing multi-page tables -->
<!-- Screen readers associate header cells with data cells -->

tbody

Das Element <tbody> umfasst die Zeilen mit den Hauptdaten:

<table>
  <thead>...</thead>
  <tbody>
    <tr>
      <td>Widget A</td>
      <td>5</td>
      <td>$49.99</td>
    </tr>
    <tr>
      <td>Widget B</td>
      <td>3</td>
      <td>$29.99</td>
    </tr>
  </tbody>
</table>

tfoot

Das Element <tfoot> umfasst die Fußzeilen – typischerweise Summen oder Zusammenfassungen:

<table>
  <thead>...</thead>
  <tbody>...</tbody>
  <tfoot>
    <tr>
      <th colspan="2">Total</th>
      <td>$309.92</td>
    </tr>
  </tfoot>
</table>
<!-- tfoot is written after tbody in HTML but renders at the bottom -->
<!-- In print, tfoot appears at the bottom of every page -->

Vollständige strukturierte Tabelle

Eine vollständige Tabelle mit allen drei Abschnitten:

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Qty</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Widget A</td><td>2</td><td>$99.98</td></tr>
    <tr><td>Widget B</td><td>1</td><td>$49.99</td></tr>
  </tbody>
  <tfoot>
    <tr><th colspan="2">Grand Total</th><td>$149.97</td></tr>
  </tfoot>
</table>

Warum thead/tbody/tfoot verwenden?

Vorteile einer Tabellenstruktur:

  • Semantik – Screenreader unterscheiden Kopf-, Daten- und Zusammenfassungsbereiche
  • CSS-Auswahl – Sie können die Abschnitte unabhängig voneinander formatieren
  • Druck – thead wird auf jeder gedruckten Seite wiederholt
  • Scrollen – Sie können mit CSS overflow den tbody unabhängig scrollen

Scrollbarer tbody

Lassen Sie nur den Inhalt scrollen, während die Kopfzeile fixiert bleibt:

table {
  display: flex;
  flex-direction: column;
  height: 300px;
}

tbody {
  overflow-y: auto;
  flex: 1;
}

Impliziter tbody

Wenn Sie <tbody> weglassen, fügt der Browser automatisch einen hinzu:

<!-- Written without tbody: -->
<table>
  <thead>...</thead>
  <tr><td>Data</td></tr>   <!-- browser wraps this in tbody -->
</table>

<!-- Always write tbody explicitly for clarity -->
<!-- Some CSS selectors like tbody:nth-child won't work without explicit tbody -->

Mehrere tbody-Elemente

Eine Tabelle kann mehrere <tbody>-Gruppen enthalten:

<table>
  <thead>...</thead>
  <tbody>
    <tr><td colspan="3"><strong>Category A</strong></td></tr>
    <tr><td>Item 1</td><td>2</td><td>$10</td></tr>
  </tbody>
  <tbody>
    <tr><td colspan="3"><strong>Category B</strong></td></tr>
    <tr><td>Item 2</td><td>5</td><td>$25</td></tr>
  </tbody>
</table>

Tabellenabschnitte formatieren

Wählen Sie Abschnitte mit CSS aus:

thead {
  background: #1e293b;
  color: white;
}

tbody tr:hover {
  background: #f0f9ff;
}

tfoot {
  border-top: 2px solid #334155;
  font-weight: bold;
  background: #f8fafc;
}

Verhalten von Screenreadern

Bei einer korrekten thead/tbody-Struktur können Screenreader:

  • Spaltenüberschriften als Kontext für jede Datenzelle ansagen
  • Zwischen Abschnitten navigieren (Kopfbereich und Datenbereich)
  • Benutzern mitteilen, wie viele Zeilen und Spalten vorhanden sind

thead-Zeilen mit mehreren Zeilen

Ein thead kann bei komplexen Kopfzeilen mehrere Zeilen enthalten:

<thead>
  <tr>
    <th rowspan="2">Product</th>
    <th colspan="2">Q1</th>
    <th colspan="2">Q2</th>
  </tr>
  <tr>
    <th>Units</th><th>Revenue</th>
    <th>Units</th><th>Revenue</th>
  </tr>
</thead>

Kurztest

Wo erscheint tfoot typischerweise im HTML-Quelltext im Vergleich zur gerenderten Tabelle?

Zusammenfassung: thead tbody tfoot

Das Wichtigste zur Tabellenstruktur:

  • <thead> – Kopfzeilen (werden beim Drucken wiederholt)
  • <tbody> – Datenzeilen (kann mehrfach vorkommen)
  • <tfoot> – Zusammenfassungs- oder Summenzeilen
  • Ermöglicht die gezielte Formatierung von Abschnitten mit CSS und eine barrierefreie Tabellennavigation
  • Schreiben Sie tbody immer ausdrücklich hin, obwohl Browser es automatisch hinzufügen

Häufig gestellte Fragen

Ist die Lektion „Struktur von thead, tbody und tfoot“ kostenlos?

Ja — der vollständige Text von „Struktur von thead, tbody und tfoot“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Struktur von thead, tbody und tfoot“?

Organisieren Sie Tabellenzeilen in semantischen Kopf-, Haupt- und Fußbereichen. Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Struktur von thead, tbody und tfoot“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. table, tr, td und th
  2. Struktur von thead, tbody und tfoot
  3. colspan und rowspan zum Zusammenfassen
  4. Barrierefreiheit bei Tabellen: scope, summary und caption
← Zurück zu HTML Academy