Mit Stylesheets lassen sich auch Tabellen formatieren. Schauen wir uns das am Beispiel der Rahmen und deren Darstellung an. Gab es unter dem ersten CSS-Level noch keine Formatierungsmöglichkeiten, hat sich das beim Level 2 geändert.

Rahmenabstände lassen sich mit "border-collapse" verändern. Mit diesem Befehl kann definiert werden, ob Tabellenlinien zusammengezogen oder einzeln dargestellt werden sollen. Eine Tabelle mit einfachen Linien wird mit folgendem Stylesheet formatiert:

 <style type="text/css">
 <!--

TABLE { border-collapse:collapse;}
 TD { border:2px blue solid; }
 //-->

</style>

Eine Tabelle mit {border-collapse:collapse}

Soll die Tabelle mit auseinander gezogenen Linien dargestellt werden, wird die seperate-Eigenschaft verwendet. Auf die englische Schreibweise ist zu achten, hier schleichen sich leicht Fehler ein.

      <style
type="text/css">
 <!--
 TABLE { border-collapse:separate;}

TD { border:2px blue solid; }
 //-->
 </style>

Die gleiche Tabelle mit {border-collapse:separate}

Der Abstand zwischen den Rahmen lässt sich mit "border-spacing" verändern. Das funktioniert nur im Zusammenhang mit border-collapse:separate. Der erste Wert stellt den horizontalen Abstand zwischen den Zellen dar, der zweite den vertikalen. Es kann auch ein einzelner Wert angegeben werden. Er gilt dann für beide Abstände.

      <style type="text/css">
 <!--

TABLE { border-collapse:separate; border-spacing:5px;}
 TD { border:2px blue
solid; }
 //-->
 </style>

Ein wenig mehr Abstand mit border-spacing

Leere Tabellenzellen können versteckt werden. Dafür gibt es den CSS-Befehl "empty-cells". Er funktioniert nur mit Tabellen, die mit border-collapse:separate formatiert wurden. Empty-cells:hide versteckt die leere Zelle, der Rahmen um die Zelle wird unterdrückt. Empty-cells:show zeigt die leere Tabellenzelle wie üblich an.

      <style
type="text/css">
 <!--
 TABLE { border-collapse:separate;
empty-cells:hide;}
 TD { border:2px blue solid; }
 //-->
 </style>

Mit empty-cells:hide wird die leere Zelle versteckt

Je moderner der Browser, desto besser wird die Darstellung. Besonders interessant wird die CSS-Formatierung mit externen Stylesheets.

Verwandte Artikel

• Webdesign ohne Tabellen Teil 2: Konsequenze (0) €
• Tabellenterror (0)
• Tabellen aufhübschen (14)
• Schöne, bunte Tabellenrahmen (0)
• Mehr Orientierung in Datentabellen (0)
• Die Freiheit nehm ich mir: Webdesign ohne Tabellen (2)
• Die moderne Tabelle (14)