HTML Tabellen

Grundaufbau einer Tabelle

Eine einfache Tabelle besteht aus Kopfzeile, Körper und optional einer Fußzeile:

HTML Kopieren

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Art</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Leo</td>
            <td>Kater</td>
        </tr>
        <tr>
            <td>Irmchen</td>
            <td>Katze</td>
        </tr>
    </tbody>
</table>

So hast du Kopf, Körper und Inhalte sauber getrennt. Das erleichtert Styling und semantische Auszeichnung.

Arten von Tabellen

• Einfach: nur <table> mit <tr> und <td> .
• Mit Kopfzeile: zusätzlich <thead> für Überschriften.
• Mit Fußzeile: <tfoot> für Summen, Hinweise oder Quellenangaben.
• Verschachtelte Tabellen: Tabellen innerhalb von Zellen - selten, nur bei komplexen Daten nötig.

Zellen verbinden mit colspan und rowspan

Manchmal müssen Zellen über mehrere Spalten oder Zeilen gehen - etwa für Überschriften, Zusammenfassungen oder komplexe Datenstrukturen. Dafür gibt es colspan und rowspan .

colspan - Spalten horizontal zusammenführen

Mit colspan erstreckt sich eine Zelle über mehrere Spalten (waagerecht):

HTML Kopieren

<!-- Eine Zelle über 3 Spalten -->
<td colspan="3">Diese Zelle geht über 3 Spalten</td>

Visualisiert:

Normal (3 separate Zellen):
[ Spalte 1 ] [ Spalte 2 ] [ Spalte 3 ]

Mit colspan="3" (1 Zelle über alle 3 Spalten):
[      Eine Zelle über 3 Spalten      ]

Typische Anwendungen:

• Abschnittsüberschriften über die ganze Tabellenbreite
• Zusammenfassungen oder Fußzeilen
• Wenn eine Zeile weniger Zellen braucht als andere

rowspan - Zeilen vertikal zusammenführen

Mit rowspan erstreckt sich eine Zelle über mehrere Zeilen (senkrecht):

HTML Kopieren

<!-- Eine Zelle über 3 Zeilen -->
<td rowspan="3">Diese Zelle geht über 3 Zeilen</td>

Visualisiert:

Mit rowspan="3" (linke Zelle über 3 Zeilen):
[ Links: 3 Zeilen ] [ Rechts Zeile 1 ]
[   zusammen      ] [ Rechts Zeile 2 ]
[                 ] [ Rechts Zeile 3 ]

Typische Anwendungen:

• Kategorien, die mehrere Unterpunkte abdecken
• Zeiträume mit mehreren zugehörigen Einträgen
• Gruppierungen in der ersten Spalte

Praktische Beispiele

Beispiel 1: Lebenslauf-Eintrag

Links ein Zeitraum (über 2 Zeilen), rechts Titel und Details:

HTML Kopieren

<table>
    <tbody>
        <tr>
            <td rowspan="2">09/2008 - 06/2015</td>
            <td><strong>Abitur</strong></td>
        </tr>
        <tr>
            <!-- Keine erste Zelle! rowspan füllt sie -->
            <td>Mustergymnasium, Musterstadt, Abschlussnote: 1,0</td>
        </tr>
    </tbody>
</table>

Beispiel 2: Fußzeile mit colspan

Im <tfoot> sollen Kontaktdaten über die gesamte Tabellenbreite gehen:

HTML Kopieren

<table>
    <thead>
        <tr>
            <th>Zeitraum</th>
            <th>Position</th>
            <th>Unternehmen</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2020 - heute</td>
            <td>Frontend Developer</td>
            <td>Web Agency GmbH</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">Musterstadt, 01.01.2025</td>
        </tr>
        <tr>
            <td colspan="3">Max Mustermann</td>
        </tr>
        <tr>
            <td colspan="3">
                Tel: 01234 456789 · max@beispiel.de
            </td>
        </tr>
    </tfoot>
</table>

Beispiel 3: colspan und rowspan kombiniert

Eine komplexere Tabelle mit beiden Attributen:

HTML Kopieren

<table>
    <thead>
        <tr>
            <th>Kategorie</th>
            <th>Produkt</th>
            <th>Preis</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">Obst</td>
            <td>Äpfel</td>
            <td>2,50 €</td>
        </tr>
        <tr>
            <!-- Keine Kategorie-Zelle! -->
            <td>Bananen</td>
            <td>1,80 €</td>
        </tr>
        <tr>
            <td rowspan="2">Gemüse</td>
            <td>Tomaten</td>
            <td>3,20 €</td>
        </tr>
        <tr>
            <td>Gurken</td>
            <td>1,50 €</td>
        </tr>
        <tr>
            <td colspan="2"><strong>Gesamt</strong></td>
            <td><strong>9,00 €</strong></td>
        </tr>
    </tbody>
</table>

<scope> für Browser und Screenreader

Das scope -Attribut bei Tabellenüberschriften <th> hilft Browsern und Screenreadern, den Kontext der Zellen zu verstehen. So wird deutlich, ob eine Überschrift für eine Spalte oder eine Zeile gilt.

HTML Kopieren

<table>
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Alter</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Leo</th>
            <td>13</td>
        </tr>
        <tr>
            <th scope="row">Irmchen</th>
            <td>18</td>
        </tr>
    </tbody>
</table>

Best Practices für Tabellen

• Verwende Tabellen nur für strukturierte Daten , nicht für Layout.
• Trenne Kopf-, Körper- und Fußbereich mit <thead> , <tbody> und <tfoot> .
• Nutze <th> für Spaltenüberschriften - das hilft der Barrierefreiheit und Screenreadern.
• Halte Zelleninhalte kurz und übersichtlich.
• Optional: Verwende scope="col" oder scope="row" für zusätzliche Semantik.

Responsive Tabellen

Tabellen sind von Natur aus nicht responsiv - auf kleinen Bildschirmen werden sie oft abgeschnitten oder erfordern horizontales Scrollen. Hier sind praktische Lösungen:

Lösung 1: Horizontales Scrollen

Die einfachste Methode - die Tabelle wird in einen scrollbaren Container gepackt:

HTML + CSS Kopieren

<div class="table-wrapper">
    <table>
        <!-- Tabelleninhalt -->
    </table>
</div>

<style>
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth Scroll auf iOS */
}

.table-wrapper table {
    min-width: 600px; /* Mindestbreite der Tabelle */
}
</style>

Lösung 2: Tabelle auf Mobile stapeln

Auf kleinen Bildschirmen wird jede Zeile zu einem eigenen Block:

CSS Kopieren

@media (max-width: 600px) {
    table, thead, tbody, th, td, tr {
        display: block;
    }
    
    /* Kopfzeile verstecken */
    thead {
        display: none;
    }
    
    /* Jede Zeile als Card */
    tr {
        margin-bottom: 1rem;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
    
    /* Label vor jeder Zelle */
    td::before {
        content: attr(data-label);
        font-weight: bold;
        display: block;
        margin-bottom: 0.25rem;
    }
    
    td {
        padding: 0.5rem;
        border: none;
        border-bottom: 1px solid #eee;
    }
}

Dazu brauchst du data-label Attribute im HTML:

HTML Kopieren

<tr>
    <td data-label="Name">Leo</td>
    <td data-label="Art">Kater</td>
    <td data-label="Alter">13 Jahre</td>
</tr>

Häufige Fehler bei Tabellen

Teste es selbst

Wende das Gelernte direkt an - probiere den Code aus dem Tutorial aus oder experimentiere mit eigenen Ideen.