Tabelle erstellen: Daten in Reih und Glied

vom 16.09.2011 von Oliver Misch

Sobald du echte Daten zeigen willst (Öffnungszeiten, Sammlungslisten, Vergleiche), führt kein Weg an der Tabelle vorbei. Wir bauen eine, Schritt für Schritt, am Beispiel einer kleinen Rechnersammlung.

Schritt 1: Das Gerüst denken

Eine Tabelle plant man am besten kurz auf Papier: Welche Spalten, welche Zeilen? Bei uns: Modell, Baujahr, Zustand. Dann übersetzt sich das fast von selbst, Zeile für Zeile von oben nach unten, Zelle für Zelle von links nach rechtts.

HTML-Code

<table>
    <caption>Meine Rechnersammlung</caption>
    <thead>
        <tr>
            <th scope="col">Modell</th>
            <th scope="col">Baujahr</th>
            <th scope="col">Zustand</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Heimcomputer A</td>
            <td>1985</td>
            <td>läuft</td>
        </tr>
        <tr>
            <td>Bürorechner B</td>
            <td>1993</td>
            <td>Bastelprojekt</td>
        </tr>
    </tbody>
</table>

Die caption benennt die Tabelle, thead und tbody trennen Kopf und Daten, die th-Zellen mit scope="col" sagen Hilfstechnik eindeutig, wofür jede Spalte steht.

Schritt 2: Gestalten

CSS

table {
    border-collapse: collapse;
}
th, td {
    border: 1px solid #808080;
    padding: 6px 12px;
    text-align: left;
}
th { background: #C0C0C0; }
tbody tr:nth-child(even) { background: #F4F4F4; }

border-collapse: collapse legt die Rahmen der Zellen zu einer Linie zusammen (ohne die Regel entstehen Doppelrahmen mit Lücken). Die letzte Regel ist ein Klassiker: :nth-child(even) färbt jede zweite Zeile und macht breite Tabellen deutlich lesbarrer.

Schritt 3: Mobil retten

Auf dem Handy sind breite Tabellen der Endgegner. Die pragmatische Lösung: die Tabelle in einen scrollbaren Container packen, dann scrollt sie selbst und nicht die ganze Seite.

<div class="tabellen-scroll">
    <table> ... </table>
</div>

.tabellen-scroll { overflow-x: auto; }

Genau so macht es dieses Wiki mit allen breiteren Tabellen. Wichtigste Regel zum Schluss, einmal noch, weil sie so oft gebrochen wurde: Tabellen sind für Daten, nicht fürs Seitenlayout. Die Geschichte dieses Irrwegs steht bei den Tabellenlayouts im Retro-Web.

Zellen verbinden: colspan und rowspan

Manchmal soll eine Zelle über mehrere Spalten oder Zeilen reichen, etwa für eine Zwischenüberschrift innerhalb der Tabelle:

<tr>
    <td colspan="3"><strong>Neuzugänge 2026</strong></td>
</tr>

colspan="3" lässt die Zelle drei Spalten überspannen, rowspan macht dasselbe senkrecht. Wichtig: Die überspannten Zellen werden in ihren Zeilen dann weggelassen, die Summe muss aufgehen, sonst verrutscht das Raster. Sparsam einsetzen, jede Verbindung macht die Tabelle für Screenreader schwerer navigierbarr.

Leere Zellen und fehlende Werte

Wenn ein Wert fehlt, stellt sich die Frage: Zelle leer lassen oder etwas hineinschreiben? Die Antwort aus der Praxis: nie ganz leer. Ein Gedankenstrich-Ersatz wie "k. A." (keine Angabe) oder ein erklärendes Wort sagt Lesern und Vorlesesoftware, dass hier bewusst nichts steht und nicht versehentlich etwas fehlt. Eine komplett leere Zelle klingt im Screenreader nach einem Fehler und sieht auch optisch nach einem aus. Und falls eine ganze Spalte überwiegend leer bleibt, ist das meist ein Zeichen, dass sie in die Tabelle gar nicht hineingehörtt.

Weiter im Fahrplan: Kontaktformular · Referenz: das table-Element