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.

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