HTML Tabellen - Daten strukturieren

📊 HTML Tabellen

Tabellen werden verwendet, um tabellarische Daten (nicht für Layouts!) darzustellen. Denk an Excel-Tabellen im Web.

Grundstruktur einer Tabelle

Eine Tabelle besteht aus mehreren verschachtelten Elementen:

<!-- Einfache Tabelle -->
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Alter</th>
            <th>Stadt</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Max Mustermann</td>
            <td>25</td>
            <td>Berlin</td>
        </tr>
        <tr>
            <td>Anna Schmidt</td>
            <td>30</td>
            <td>München</td>
        </tr>
    </tbody>
</table>

Tabellen-Elemente erklärt

<table> - Die Tabelle selbst

• Umschließt die gesamte Tabelle
• Kann Attribute wie border haben (besser mit CSS stylen!)

<thead> - Tabellen-Kopf

• Enthält die Kopfzeile(n) der Tabelle
• Optional, aber semantisch wichtig
• Browser können dies beim Drucken auf jeder Seite wiederholen

<tbody> - Tabellen-Körper

• Enthält die Hauptdaten der Tabelle
• Optional, wird vom Browser automatisch hinzugefügt wenn weggelassen

<tfoot> - Tabellen-Fuß

• Für Zusammenfassungen am Ende (z.B. Summen)
• Optional

<tr> - Table Row (Zeile)

• Definiert eine Zeile in der Tabelle
• Enthält <th> oder <td> Elemente

<th> - Table Header (Kopfzelle)

• Überschriften-Zellen
• Werden standardmäßig fett und zentriert dargestellt
• Wichtig für Barrierefreiheit!

<td> - Table Data (Datenzelle)

• Normale Datenzellen
• Enthalten den eigentlichen Inhalt

Spalten und Zeilen verbinden

Mit colspan und rowspan kannst du Zellen über mehrere Spalten/Zeilen erstrecken:

<!-- colspan - Spalten verbinden -->
<table border="1">
    <tr>
        <th colspan="2">Header über 2 Spalten</th>
    </tr>
    <tr>
        <td>Zelle 1</td>
        <td>Zelle 2</td>
    </tr>
</table>

<!-- rowspan - Zeilen verbinden -->
<table border="1">
    <tr>
        <td rowspan="2">Zelle über 2 Zeilen</td>
        <td>Normale Zelle</td>
    </tr>
    <tr>
        <td>Zweite Zeile</td>
    </tr>
</table>

colspan - Spalten verbinden

• <td colspan="2"> - Zelle erstreckt sich über 2 Spalten
• Andere Zellen in der gleichen Zeile werden weniger

rowspan - Zeilen verbinden

• <td rowspan="3"> - Zelle erstreckt sich über 3 Zeilen
• Folgezeilen haben dann weniger Zellen

Tabellen-Attribute

scope - Für Barrierefreiheit

<table>
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Alter</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Max</th>
            <td>25</td>
        </tr>
    </tbody>
</table>

• scope="col" - Überschrift für Spalte
• scope="row" - Überschrift für Zeile

caption - Tabellentitel

<table>
    <caption>Mitarbeiterliste 2025</caption>
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
        </tr>
    </thead>
    <!-- ... -->
</table>

Komplexes Beispiel

<table>
    <caption>Verkaufszahlen Q1 2025</caption>
    <thead>
        <tr>
            <th scope="col">Monat</th>
            <th scope="col">Produkt A</th>
            <th scope="col">Produkt B</th>
            <th scope="col">Gesamt</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Januar</th>
            <td>1.200€</td>
            <td>800€</td>
            <td>2.000€</td>
        </tr>
        <tr>
            <th scope="row">Februar</th>
            <td>1.500€</td>
            <td>950€</td>
            <td>2.450€</td>
        </tr>
        <tr>
            <th scope="row">März</th>
            <td>1.800€</td>
            <td>1.100€</td>
            <td>2.900€</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th scope="row">Gesamt</th>
            <td>4.500€</td>
            <td>2.850€</td>
            <td>7.350€</td>
        </tr>
    </tfoot>
</table>

Best Practices

✅ Nur für Daten verwenden

Falsch: Tabellen für Page-Layout
Richtig: Tabellen nur für tabellarische Daten

Verwende Tabellen NICHT für Layouts! Nutze CSS Grid/Flexbox stattdessen.

✅ Immer <thead> nutzen

Macht Tabellen verständlicher und barrierefrei.

✅ Caption hinzufügen

Gibt der Tabelle einen beschreibenden Titel.

✅ Responsive machen

Große Tabellen auf Handy-Bildschirmen anpassen:

/* Einfache responsive Lösung */
@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
    }
}

✅ Barrierefreiheit

• Nutze <th> für Überschriften
• Nutze scope Attribut
• Nutze <caption> für Beschreibung

Styling mit CSS

Tabellen sehen ohne CSS nicht gut aus. Grundlegendes Styling:

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
    font-weight: bold;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

tr:hover {
    background-color: #f5f5f5;
}

Häufige Fehler

❌ Falsch: Tabellen für Layouts verwenden

<!-- NICHT SO! -->
<table>
    <tr>
        <td>Header</td>
    </tr>
    <tr>
        <td>Content</td>
    </tr>
</table>

✅ Richtig: CSS Grid/Flexbox für Layouts

❌ Falsch: Fehlende Strukturelemente

<table>
    <tr><td>Daten</td></tr>
</table>

✅ Richtig: Mit thead, tbody

<table>
    <thead>
        <tr><th>Header</th></tr>
    </thead>
    <tbody>
        <tr><td>Daten</td></tr>
    </tbody>
</table>

table>thead>tr>th*3^tbody>tr*3>td*3

thead th {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 10;
}

.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}

Zusammenfassung

• <table> umschließt die gesamte Tabelle
• <thead>, <tbody>, <tfoot> strukturieren die Tabelle
• <tr> definiert Zeilen
• <th> für Überschriften, <td> für Daten
• colspan und rowspan verbinden Zellen
• scope und caption für Barrierefreiheit
• Nur für Daten, nicht für Layouts!