Tabellen standardkonform für Layouts nutzen

Workshop: Komplexe Tabellen mit CSS gestalten

Seit CSS gelten Tabellen als altmodisch - zu Unrecht. Der Workshop zeigt, wie Sie mit CSS-Tabellen arbeiten und sogar standardkonform für Layouts nutzen.

CSS-Praxis

© Archiv

CSS-Praxis

Bevor CSS-Stylesheets von Browsern sinnvoll verarbeitet werden konnten, waren Tabellen für viele Webdesigner ein Hilfsmittel zur Positionierung von Objekten in Relation zueinander auf der Seite. Dieser Workaround generiert einen Quelltext, der sich nur schwer warten lässt und Screen-reader-Software durcheinanderbringt.

Das W3C hat mittlerweile mit seiner Anti-Tabellen-Offensive diese unschöne Praxis weitgehend unterdrücken können. Und so wird der Ratschlag: "Benutzen Sie keine Tabellen für das Layout" aus der offiziellen HTML 4.01-Spezifikation oft falsch interpretiert als "Benutzen Sie keine Tabellen".

Das ist nicht im Sinne des Erfinders. Wenn man Tabellen prinzipiell aus dem Weg geht, schüttet man das sprichwörtliche Kind mit dem Bade aus. CSS-Tabellen gehören durchaus zum guten Ton, und zwar in zwei Einsatzbereichen:

zur Darstellung von tabellarischen Inhalten und zur Gestaltung von Spalten-basierten Layouts. Zu CSS-Tabellen gibt es mehr, was man wissen muss, als dass sie sich aus Reihen und Spalten zusammensetzen, insbesondere wenn man Tabellen W3C-konform und damit barrierefrei gestalten möchte.

Tabellenstrukturen

Eine traditionelle HTML-Tabelle nach der alten Schule sieht etwa wie folgt aus:

<table><tr><td>Firma</td><td>Mitarbeiter</td></tr><tr><td>XYZ AG</td><td>50000</td></tr><tr><td>ABC AG</td><td>2500</td></tr></table>

Bei dieser sparsamen Auszeichnung wird die Formatierung der Tabelle mittels CSS unnötig umständlich: meistens mittels nicht Standard-konformem HTML-Code anstelle von CSS.

Die resultierende Tabelle mag dann visuell akzeptabel aussehen, aber mit semantischem Web hat sie nichts zu tun. Jemand, der darauf angewiesen ist, sich die Inhalte per Software vorlesen zu lassen, bekommt lediglich etwas wie folgt zu hören:

"Firma, Mitarbeiter, XYZ AG, 50000, ABC AG, 2500". Es ist nicht ganz so einfach, sich hierauf einen Reim zu machen.

Das Tabellenmodell in CSS 2 basiert auf dem HTML-4.01-Tabellenmodell. Dieses umfasst die folgenden HTML-Elemente:

Tabellen, Überschriften, Zeilen, Gruppen von Zeilen, Spalten, Gruppen von Spalten und Zellen.

Das Element <thead> kennzeichnet den Kopfbereich der Tabelle und umfasst mittels <th> markierte Überschriften der Spalten. Auf den Kopfbereich folgt das <tbody>-Element, welches den Hauptteil der Tabelle festlegt. <tfoot> legt schließlich den Fußbereich fest, in dem sich mittels <th> markierte Überschriften befinden können.

Sollten Sie die Elemente <thead> und <tfoot> nutzen, so müssen diese Container mindestens eine Zeile enthalten, das heißt, sie dürfen nicht leer sein.

CSS-Praxis

© Archiv

Hier wurde die Eigenschaft border-collapse auf den Wert separate gesetzt.

Der Start-Tag <tbody> muss in diesem Fall unbedingt zum Einsatz kommen. Eine Ausnahme von dieser Regel gäbe es nur dann, wenn die Tabelle nur den <body>-Abschnitt hätte und weder Kopf- noch Fußbereich enthielte.

Mit dem Tag <caption> erhält die Tabelle eine auf der Seite sichtbare Tabellenüberschrift mit einer Kurzbeschreibung der Inhalte. Dieses Element folgt im Quelltext direkt auf den öffnenden <table>-Tag.

Mit dem Attribut summary kann man zusätzliche Informationen zum Inhalt der Tabelle in den Quelltext der Seite einbinden; diese werden allerdings nicht dargestellt.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".