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.

© 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.

© 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 lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.