HTML Tabellen thead tbody tfoot

Preislisten, Statistiken, Produktvergleiche – dafür gibt's HTML Tabellen! Mit <table>, <thead>, <tbody> und <tfoot> strukturierst du Daten übersichtlich. In diesem Tutorial lernst du, wie du professionelle Tabellen erstellst.

Einführung in das HTML Tabellen Tutorial

Was sind HTML Tabellen

Tabellen organisieren Daten in Zeilen und Spalten. Die wichtigsten Elemente:

<table> – der Container
<thead> – Tabellenkopf (Spaltenüberschriften)
<tbody> – Tabelleninhalt (die Daten)
<tfoot> – Tabellenfuß (Summen, Fußnoten)
<tr> – Tabellenzeile (table row)
<th> – Kopfzelle (table header)
<td> – Datenzelle (table data)

Wann du Tabellen verwenden solltest

Faustregel: Würden die Daten in Excel Sinn machen? Dann: Tabelle!

Gut für: Preislisten, Statistiken, Vergleiche, Kalender

Nicht für: Seitenlayout (nutze CSS Grid/Flexbox!)

Überblick über thead tbody tfoot

Die drei Bereiche gliedern deine Tabelle logisch:

thead: Spaltenüberschriften (bleibt bei Scrollen oft fixiert)
tbody: Die eigentlichen Daten
tfoot: Zusammenfassungen, Summen

Voraussetzungen

Benötigte HTML Grundlagen

Du solltest mit HTML-Tags und Elementen vertraut sein. Falls nicht, hol das kurz nach!

Editor und Browser Setup

Jeder Texteditor und Browser funktioniert. VS Code mit HTML-Highlighting macht's angenehmer.

Schritt-für-Schritt-Anleitung

Grundstruktur einer HTML Tabelle

Das Grundgerüst:

Jetzt HTML lernen

<table>
    <thead>
        <!-- Tabellenkopf -->
    </thead>
    <tbody>
        <!-- Tabelleninhalt -->
    </tbody>
    <tfoot>
        <!-- Tabellenfuß -->
    </tfoot>
</table>

thead für Tabellenkopf erstellen

Im thead stehen die Spaltenüberschriften mit <th> statt <td>:

HTML Tutorial starten

<thead>
    <tr>
        <th>Name</th>
        <th>Alter</th>
        <th>Stadt</th>
    </tr>
</thead>

<th> signalisiert: "Das ist eine Überschrift!" – Browser machen sie automatisch fett.

tbody für Tabelleninhalt aufbauen

Der tbody enthält die eigentlichen Daten mit <td>:

<tbody>
    <tr>
        <td>Max</td>
        <td>25</td>
        <td>Berlin</td>
    </tr>
    <tr>
        <td>Anna</td>
        <td>30</td>
        <td>Hamburg</td>
    </tr>
</tbody>

tfoot für Tabellenfuß hinzufügen

Für Summen oder Zusammenfassungen:

<tfoot>
    <tr>
        <th>Gesamt</th>
        <td>2 Personen</td>
        <td>2 Städte</td>
    </tr>
</tfoot>

Fun Fact: Im HTML-Code kann tfoot vor tbody stehen – Browser zeigen es trotzdem unten an!

Code-Beispiele zu HTML Tabellen

Vollständige Tabelle

Mehr HTML Beispiele

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Alter</th>
            <th>Fortschritt</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Lisa</td>
            <td>12</td>
            <td>75%</td>
        </tr>
        <tr>
            <td>Tom</td>
            <td>14</td>
            <td>60%</td>
        </tr>
        <tr>
            <td>Sara</td>
            <td>13</td>
            <td>90%</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Durchschnitt</th>
            <td>13 Jahre</td>
            <td>75%</td>
        </tr>
    </tfoot>
</table>

Tabelle mit scope-Attribut (Barrierefreiheit)

Für Screenreader-Nutzer:

<thead>
    <tr>
        <th scope="col">Monat</th>
        <th scope="col">Einnahmen</th>
        <th scope="col">Ausgaben</th>
    </tr>
</thead>
<tbody>
    <tr>
        <th scope="row">Januar</th>
        <td>2500€</td>
        <td>1800€</td>
    </tr>
</tbody>

scope="col" = Überschrift für Spalte, scope="row" = Überschrift für Zeile.

Häufige Fehler & Troubleshooting

Fehler 1: td/th direkt in table

FALSCH: <table><td>Inhalt</td></table>
RICHTIG: <table><tr><td>Inhalt</td></tr></table>

Zellen brauchen IMMER eine Zeile (<tr>) drumherum!

Fehler 2: Ungleiche Spaltenanzahl

Wenn Zeile 1 drei Spalten hat und Zeile 2 nur zwei – Chaos! Alle Zeilen brauchen gleich viele Zellen.

Fehler 3: Tabellen fürs Layout

Das war in den 90ern. Heute: CSS Grid oder Flexbox für Layouts, Tabellen nur für echte Daten!

HTML Tabellen: Best Practices & Tipps

Semantisch korrekte Struktur

<th> für Überschriften, <td> für Daten
scope-Attribut für Barrierefreiheit
<caption> für Tabellentitel

Barrierefreiheit

Screenreader navigieren durch Tabellen. Mit thead/tbody/tfoot und scope-Attributen hilfst du blinden Nutzern enorm!

Performance

Bei riesigen Tabellen (tausende Zeilen): Überlege Paginierung oder virtuelles Scrolling statt einer Monster-Tabelle.

Fazit zum HTML-Tutorial: Was hast du hier gelernt

Du kennst jetzt alle wichtigen Tabellen-Elemente:

<table>, <tr>, <th>, <td> – die Basics
<thead>, <tbody>, <tfoot> – für klare Struktur
scope-Attribut – für Barrierefreiheit

Damit erstellst du professionelle, barrierefreie Tabellen für alle Datenarten.

Bereit für mehr? Lerne als Nächstes, wie du HTML Formulare erstellst – damit werden deine Seiten interaktiv!