Tabellen für Daten

Manche Informationen sind von Natur aus zweidimensional. Ein Stundenplan, ein Zugfahrplan, eine Preisübersicht, die Bundesliga-Tabelle: Erst das Zusammenspiel aus Zeile und Spalte erzeugt die Aussage – Dienstag, zweite Stunde: Mathe. Genau dafür gibt es HTML-Tabellen. In dieser Lektion baust du deine erste echte Datentabelle, machst sie mit zwei Handgriffen für Screenreader lesbar und lernst mit colspan und rowspan die hohe Schule des Zellenverbindens.

Eine HTML-Tabelle ist für tabellarische Daten da: Informationen, die in Zeilen und Spalten organisiert sind und bei denen jede Zelle ihre Bedeutung erst durch ihre Zeilen- und Spaltenüberschrift bekommt. Der Praxistest ist einfach: Könntest du die Information sinnvoll in eine Tabellenkalkulation eintragen? Dann ist eine Tabelle das richtige Element.

Ein kurzer Blick zurück erklärt, warum diese Klarstellung überhaupt nötig ist: In den 1990er-Jahren, lange bevor CSS leistungsfähig wurde, missbrauchten Webdesigner Tabellen als Layout-Werkzeug. Die ganze Seite war eine unsichtbare Riesentabelle – die Navigation in der linken „Spalte“, der Inhalt rechts. Das war damals ein Notbehelf und ist heute in doppelter Hinsicht falsch: CSS kann Layout längst besser, und Screenreader behandeln Tabellen als das, was sie sind – Daten. Sie lesen Zelle für Zelle vor, mit Zeilen- und Spaltenansagen. Eine Layout-Tabelle wird für diese Nutzer zur unverständlichen Zumutung.

Und noch eine Abgrenzung nach unten: Eine simple Begriff-Wert-Sammlung wie der Steckbrief aus der Listen-Lektion braucht noch keine Tabelle – dafür reicht die Beschreibungsliste <dl>. Eine Tabelle lohnt sich erst, wenn es echte Spalten gibt, also mehrere zusammengehörige Werte pro Zeile.

Jede Tabelle besteht aus vier Grundbausteinen, die immer gleich zusammenspielen:

• <table> umschließt die gesamte Tabelle.
• <tr> (table row) bildet eine Zeile.
• <td> (table data) ist eine normale Datenzelle innerhalb einer Zeile.
• <th> (table header) ist eine Kopfzelle – die Überschrift einer Spalte oder Zeile.

Wichtig fürs Kopfkino: HTML kennt kein Element für Spalten. Du schreibst eine Tabelle immer Zeile für Zeile, von oben nach unten – die Spalten ergeben sich von selbst, weil jede Zeile gleich viele Zellen enthält. Gerät die Zellenzahl einer Zeile aus dem Takt, verschiebt sich die ganze Tabelle sichtbar; das ist gleichzeitig dein bestes Warnsignal beim Testen.

Der Unterschied zwischen <th> und <td> ist dabei nicht der Fettdruck, den Browser standardmäßig spendieren – er ist nur ein Nebeneffekt. <th> transportiert Bedeutung: Ein Screenreader merkt sich die Kopfzellen und sagt zu jeder Datenzelle die passende Überschrift an, etwa „Öffnungszeit: 9 bis 18 Uhr“. Wer stattdessen aus optischen Gründen ein fettes <td> verwendet, beraubt die Tabelle genau dieser Fähigkeit.

In eine Zelle darf übrigens mehr als nackter Text: Links, Bilder, sogar kleine Listen sind erlaubt. Halte Zellen trotzdem so knapp wie möglich – wer ganze Absätze in Tabellen stopft, hat meist gar keine tabellarischen Daten vor sich, sondern Fließtext im falschen Gewand.

Bei größeren Tabellen lohnt sich eine zusätzliche Gliederungsebene: <thead> fasst die Kopfzeile(n) zusammen, <tbody> enthält den eigentlichen Datenteil, und <tfoot> nimmt eine abschließende Zeile auf – klassischerweise eine Summe. Das ist mehr als Kosmetik: Beim Ausdrucken oder Scrollen sehr langer Tabellen kann der Browser den <thead> wiederholen, Stylesheets können den Datenteil gezielt ansprechen (etwa jede zweite Zeile einfärben), und dein Quelltext bleibt auch bei fünfzig Zeilen übersichtlich.

Alle drei Bereiche sind optional: Eine kleine Tabelle wie unsere Öffnungszeiten kommt gut ohne sie aus. Sobald eine Tabelle aber wächst oder eine Summenzeile bekommt, zahlt sich die Gliederung aus – und sie kostet beim Schreiben fast nichts.

Im Kassenzettel-Beispiel ist dir vielleicht schon das Attribut scope aufgefallen. Es gehört zu den zwei kleinen Ergänzungen, die deine Tabellen auf professionelles Niveau heben – beide kosten nur Sekunden:

<caption> ist der Titel der Tabelle und steht als allererstes Element direkt nach dem öffnenden <table>-Tag. Sehende erfassen den Zweck einer Tabelle meist auf einen Blick aus dem Umfeld – Screenreader-Nutzer bekommen mit der <caption> dieselbe Orientierung: Beim Springen von Tabelle zu Tabelle wird der Titel angesagt, und man weiß sofort, ob sich das zellenweise Erkunden lohnt. Eine gewöhnliche Überschrift über der Tabelle ist kein Ersatz, denn sie ist technisch nicht mit ihr verbunden.

scope beantwortet für jede Kopfzelle die Frage: Gilt sie für eine Spalte oder für eine Zeile? <th scope="col"> überschreibt die Spalte darunter, <th scope="row"> die Zeile daneben. Bei ganz einfachen Tabellen erraten Screenreader die Zuordnung meist richtig – aber sobald eine Tabelle Kopfzellen oben und links hat (wie gleich unser Stundenplan), wird scope zur unverzichtbaren Landkarte. Gewöhne es dir von Anfang an an: Es ist die einfachste Zugänglichkeitsregel für Tabellen.

Probiere beides aus. Die drei Zeilen CSS am Anfang des Beispiels zeichnen nur Linien um die Zellen, damit du die Struktur sehen kannst – ohne sie wäre die Tabelle randlos und schwer zu erkennen. Was CSS genau tut, lernst du in einem eigenen Kurs; hier darfst du diese Zeilen einfach ignorieren:

Aufgabe: Ergänze eine dritte Zeile für den Sonntag („geschlossen“) und ändere den Text der <caption>. Achte darauf, dass jede neue Zeile wieder genau zwei Zellen enthält – sonst gerät die Tabelle sichtbar aus dem Takt.

Im echten Leben sind Tabellen selten perfekt rechteckig: Im Stundenplan belegt die Doppelstunde Sport zwei Zeilen, die große Pause zieht sich über alle Spalten. Dafür gibt es zwei Attribute:

• colspan="2" macht eine Zelle zwei Spalten breit – sie nimmt den Platz ihrer rechten Nachbarzelle mit ein.
• rowspan="2" macht eine Zelle zwei Zeilen hoch – sie ragt in die Folgezeile hinein.

Die goldene Regel dabei: Für jede Zelle, die sich ausdehnt, musst du an anderer Stelle Zellen weglassen. Eine Zelle mit rowspan="2" bedeutet: In der nächsten Zeile schreibst du an dieser Position keine Zelle – die verbundene ragt ja bereits hinein. Genau hier entstehen die meisten Tabellen-Fehler: eine Zelle zu viel notiert, und alles verschiebt sich nach rechts. Sieh dir im folgenden Stundenplan den Kommentar in der zweiten Zeile an – dort fehlt die Zelle mit Absicht:

Experimentiere ruhig destruktiv: Gib der Doppelstunde ein rowspan="3" und beobachte, wie die Pausenzeile verrutscht – und repariere die Tabelle anschließend wieder. Es gibt keinen besseren Weg, das Zusammenspiel von Ausdehnen und Weglassen zu verinnerlichen. Beide Attribute akzeptieren übrigens jede Zahl (colspan="4" überspannt vier Spalten) und lassen sich an derselben Zelle sogar kombinieren – nötig ist das aber selten.

Bisher senden deine Seiten nur in eine Richtung: von dir zu den Besuchern. In der nächsten Lektion drehen wir den Spieß um – mit Formularen nehmen deine Seiten Eingaben der Nutzer entgegen, vom Suchfeld bis zur Kontaktanfrage.