Tabellen standardkonform für Layouts nutzen

Teil 3: Workshop: Komplexe Tabellen mit CSS gestalten

Webdesigner neigen schon mal dazu, die Einhaltung der Barrierefreiheit zu umgehen. Dabei gehören in Europa wie auch in den USA barrierefreie Webseiten bei Aufträgen für Regierungen, Behörden, Ämter und Universitäten eigentlich so gut wie immer zum Pflichtenheft. Wer Tabellen mit CSS erstellt, erfüllt die Voraussetzungen fast nebenbei.

CSS-Tabellen leicht gemacht

Die Überzeugung, CSS-Tabellen müssten schwieriger als HTML-Tabellen sein, ist ein Irrglaube. CSS-formatierte Tabellen lassen sich mit nur minimalem Aufwand erzeugen. Im Folgenden nun ein kurzes Beispiel für passenden CSS-Code:

table { border-collapse: separate;
border: 1px solid #666;
background-color: #ccf; }
th { text-align: left; }
td { border: 1px solid #666;
background-color: #ffc; }

Die CSS-2-Eigenschaft border-collapse erlaubt es, auf die Schnelle formatierte Tabellen zu erzeugen.

Tabellarische Layouts

Es stellt sich nun aber die berechtigte Frage nach dem Einsatz von CSS-Tabellen zur Gestaltung des Seitenlayouts. Hierbei muss man zuerst den Unterschied zwischen HTML und CSS in Bezug auf das Konzept von Tabellen abklären.

Bei dem HTML-Element <table> handelt es sich um eine semantische Struktur. Dieses Element beschreibt den Charakter der betreffenden Inhalte und darf daher zur Auszeichnung des Layouts einer Webseite nicht verwendet werden. <table> ist für tabellarische Daten reserviert, also für Daten, die eine Tabelle darstellen.

CSS-Praxis

© Archiv

Ein CSS-basiertes tabellarisches Layout am Beispiel einer Fotogalerie.

Im Kontext von CSS handelt es sich dagegen bei dem Wort table um einen Wert der display-Eigenschaft. Diese Eigenschaft bestimmt, wie betreffende Elemente der Seite visualisiert werden sollen, und lässt die semantische Zuordnung der Inhalte außer Acht.

Solange keine HTML-Tags, die für Tabellen reserviert sind, beim Festlegen des Seitenlayouts Verwendung finden, bleiben die Voraussetzungen für semantisches Web erfüllt.

CSS-Tabellen eignen sich in diesem Fall hervorragend als Layouthilfe überall dort, wo es gilt, Einschränkungen von float-Konstrukten und absoluter Positionierung zu umschiffen.

CSS-Tabellen als Layouthilfe

Wird die Eigenschaft display eines Objektes auf den Wert table gesetzt, wird das betreffende Element so dargestellt, als ob es zu einer Tabelle gehörte. Alle untergeordneten Elemente erben diese Eigenschaft und fügen sich ebenfalls dem Tabellenlayout.

Für Software-Agenten ändert sich jedoch die Zuordnung der Inhalte nicht, denn der HTML-Quelltext enthält ja gar keine Hinweise auf eine Tabelle.

Tabellarische CSS-Layouts können helfen, Probleme zu umgehen, die durch absolute Positionierung und float-Konstruktionen bei mehrspaltigen Layouts entstehen können.

Zu den größten Vorteilen CSS-basierter Tabellenlayouts gehört die Fähigkeit, die Umrisse einer Zelle mit Leichtigkeit zu definieren und Hintergrundbilder mit Eleganz einzubinden.

Der Quelltext würde dann zum Beispiel so aussehen:

<body><div id="wrapper"><div id="header"></div><div id="main"><div id="nav">
Inhalt der Navigationsspalte</div><div id="extras">
Inhalt der Spalte Extras</div><div id="content">Die Hauptspalte</div></div></div></body>

Dieser Quelltext beinhaltet nicht die geringste Spur einer HTML-Tabelle. Er verstößt gegen keine Prinzipien guten Designs.

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​".