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

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…