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.
- Workshop: Komplexe Tabellen mit CSS gestalten
- Teil 2: Workshop: Komplexe Tabellen mit CSS gestalten
- Teil 3: Workshop: Komplexe Tabellen mit CSS gestalten
- Teil 4: Workshop: Komplexe Tabellen mit CSS gestalten
- Teil 5: Workshop: Komplexe Tabellen mit CSS gestalten
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.
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.
