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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…