Tabellen und Rahmen mit CSS gestalten

Im Grunde bestimmt die Eigenschaft „border-collapse“ (Zusammenfallen von Zellenrahmen) die Art des Rahmens einer Tabelle. Standard ist das Modell „collapsing borders“, also zusammenfallende Rahmen, wobei das andere mögliche Modell „separated borders“, also voneinander getrennte Rahmen vorsieht. Das „separated borders“-Modell verwendet die Eigenschaft „border-spacing“ (Rahmenabstand im Gitternetz), um damit den Abstand zwischen zwei innerhalb der Tabelle definierten Rahmen zu bestimmen. Der Abstand wird mit der Hintergrundfarbe des Tabellenelements gefüllt.

Beim „collapsing borders“-Modell liegen die Dinge nicht so einfach. Hier liegen die Rahmen übereinander, so dass die Tabelle am Ende kleiner ist als ihre Entsprechung im „separate borders“-Modell. Das World Wide Web Consortium hat die folgenden Regeln verfasst, die bestimmen, welcher Rahmentyp im Falle eines Konfliktes übernommen wird:

• Rahmen mit dem Rahmentyp „hidden“ haben Vorrang vor allen anderen Rahmen, die damit konkurrieren. Ein Rahmen mit diesem Wert überlagert alle anderen an diesem Ort befindlichen Rahmen.
• Rahmen mit dem Rahmentyp „none“ haben die niedrigste Priorität. Einzig dann, wenn auch alle anderen Elemente, die sich an dieser Stelle berühren, den Wert „none“ haben, wird der Rahmen weggelassen (man beachte, dass „none“ der Standardwert für den Rahmentyp ist).
• Wenn keine der Angaben „hidden“ und mindestens eine nicht „none“ lautet, werden breite Rahmen anstelle von schmalen verwendet. Wenn die Breitenangaben gleich sind, dann entscheidet die folgende Reihenfolge von Rahmentypen (border-style): double, solid, dashed, dotted, ridge, outset, groove, inset.
• Wenn sich Rahmentypen nur durch die Farbe unterscheiden, hat die Rahmengestaltung einer Zelle Vorrang vor der einer Zeile, die wiederum Vorrang vor einer Gruppe von Zeilen, Spalten, Gruppen von Spalten und der Tabelle hat.

Im Rahmen

Tabellen sind, wie alle HTML-Elemente, mit CSS auf vielerlei Art zu gestalten. Der Rahmen der Tabelle und ihrer Zellen geben ein gutes Beispiel dafür, dass mit CSS Tabellen für fast alle Anforderungen gestaltet werden können. Vorsehen sollte sich der Entwickler bei CSS insofern, als dass die Darstellung sich von Browser zu Browser unterscheiden kann – es sind also umfassende Tests notwendig.