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