CSS

Tabellen umformatieren

(msc) Über eine Stildatei kann man Tabellen auf vielfältige Weise formatieren. Webdesigner Seamus P. H. Leahy zeigt auf seiner Website moronicbajebus.com, dass es sogar möglich ist, nur über eine CSS-Datei die tabellarische Darstellung aufzubrechen und den Tabelleninhalt als Fliesstext darzustellen. Das mag auf den ersten Blick unsinnig sein – auf den zweiten Blick könnte man aber zum Schluss kommen, dass ein Umformatieren grösserer Tabellen über eine CSS-Datei viel schneller geht als das Umbauen.

Bei dem Beispiel wurde die Originaltabelle durch die folgenden Stildeklarationen umformatiert:

table#fluss tr > th {display: none;}
table#fluss tbody tr {display: block}
table#fluss tr > * {display: block; border:none}
table#fluss tr td:first-child {font-size:large; font-weight:bold}
table#fluss tr td:first-child + td:before { content: "Hauptort: "; font-weight:bold}
table#fluss tr td:first-child + td + td:before {content: "Beitritt: "; font-weight:bold}
table#fluss {border:none}

Was passiert hier genau? Der Trick ist, mit Selektoren geschickt die einzelnen Zellen neu umzubrechen und mit der Content-Eigenschaft richtig zu beschriften. Als erstes unterdrücken wir die Anzeige des Tabellenkopfs mit display:none. Die verschiedenen Anweisungen display:block führen dazu, dass die normalerweise nebeneinander angezeigten Zellen untereinander (mit Zeilenwechsel) dargestellt werden. Ferner werden über border:none die Rahmen ausgeblendet und über Schriftgrössen und font-weight-Angaben die einzelnen Haupteinträge hervorgehoben.

Über das content-Statement schaffen wir es, die einzelnen Zeilen zu beschriften (mit «Hauptort» und «Beitritt»).

Die Ausgangslage: Eine ganz normale HTML-Tabelle.

Die gleiche Tabelle, per CSS in Fliesstext umgewandelt.