Listen und Daten bereitet man für das Web immer noch am besten in Tabellen auf. Mit CSS stehen vielfältige Gestaltungsmöglichkeiten und Rahmentypen zur Verfügung. ZDNet zählt sie auf und bringt Codebeispiele.
Während es aus der Mode gekommen ist, Webseiten mit Tabellen zu gestalten, darf man Listen ruhig weiter in Tabellenform darstellen. Natürlich gibt es zahlreiche Möglichkeiten, Tabellen zu präsentieren. Auf den folgenden Seiten wird gezeigt, wie man CSS verwendet, um die Rahmen von HTML-Tabellen schöner zu machen.
Das CSS2-Tabellenmodell[1] basiert auf dem HTML-4.01-Tabellenmodell[2]. Das heißt, eine Tabelle besteht aus einer optionalen Überschrift und einer beliebigen Anzahl von Zeilen. Das Tabellenmodell umfasst folgende Elemente: Tabellen, Überschriften, Zeilen, Gruppen von Zeilen, Spalten, Gruppen von Spalten und Zellen. In diesem Artikel geht es hauptsächlich um die Rahmen zwischen den einzelnen Elementen innerhalb einer Tabelle und um den Rahmen der Tabelle selbst. Der Aufbau[3] einer HTML-Tabelle wurde unlängst erklärt[3].
Rahmen
Abhängig von der Tabelle und ihrer Aufgabe besteht die Möglichkeit, die Zellen alle oder einzeln mit Rahmen zu versehen. Rahmen können für die gesamte Tabelle wie auch für einzelne Zellen definiert werden. Durch die Rahmeneigenschaften in CSS wird die Breite des Rahmens ebenso bestimmt wie seine Farbe und andere Eigenschaften. Der folgende Code-Ausschnitt beschreibt einen fünf Pixel breiten, schwarzen Rahmen, der die Tabelle einfasst.
TABLE { 5px solid black; }
Mit derselben Syntax werden einzelnen Zellen in der Tabelle Rahmen zugewiesen. Die folgenden Werte ermöglichen eine Bestimmung der Art des Rahmens:
- none: Dieser Wert steht für "ohne Rahmen", die Rahmenbreite ist 0.
- dotted: Der Rahmen besteht aus Punkten.
- dashed: Rahmen besteht aus kurzen Strichen.
- solid: Der Rahmen besteht aus einer durchgehenden Linie.
- double: Der Rahmen besteht auch zwei durchgehenden Linien.
- groove: Der Rahmen sieht aus, als sei er in die Oberfläche eingeschnitten.
- ridge: Die Umkehrung von groove. Der Rahmen sieht aus, als rage er über die Oberfläche hinaus.
- inset: Der Rahmen sieht aus, als sei er in die Oberfläche eingelassen.
- outset: Die Umkehrung von inset. Der Rahmen sieht aus, als rage er über die Oberfläche hinaus.
Jedem Rahmentyp kann eine Farbe zugeordnet werden. Außerdem überlagern die Rahmen den Hintergrund des Elements. Listing A verwendet die Rahmeneigenschaft zur Gestaltung der gesamten Tabelle, ebenso für deren Überschrift und einzelne Zellen.
Listing A
Dieses Beispiel zeigt einige der vielen verfügbaren Rahmenoptionen. Beim Bestimmen der Rahmenstärke können die jeweils bevorzugten Maßeinheiten (Pixel, Punkt, Zentimeter, aber auch schlank, mittel oder breit) und beim Bestimmen der Farbe Hexadezimalwerte oder die Namen der Farben verwendet werden. Zur Definition der Rahmen im Beispiel wird diese Syntax verwendet:
border: 5px solid red;
Diese Syntax vereint die Werte für Breite, Typ und Farbe in einer Deklaration. Es ist aber auch möglich, sie als getrennte Eigenschaftsdeklarationen zu behandeln, wie der folgende Codeabschnitt zeigt:
border-width: 5px; border-style: solid; border-color: red;
Die Eigenschaften des Rahmens können auch geteilt werden, um seine vier Seiten separat zu behandeln. Dabei handelt es sich um oben, unten, links und rechts. In Listing B wird das oben stehende Beispiel abgeändert, so dass die vier Rahmenoptionen für den gesamten Rahmen und auch für den oberen Abschnitt des Rahmens der Überschrift beschrieben werden.
Listing B
Wie zu sehen, ist der gesamte Rahmen des Elements CAPTION (Überschrift) als blauer "ridge"-Typ von fünf Punkten Breite definiert, aber der obere Teil des Rahmens von CAPTION ist auf 10 Punkte gesetzt. Die Einstellungen für einzelne Rahmenabschnitte überlagern Einstellungen für den gesamten Rahmen, wenn die Einstellungen für die einzelnen Rahmenabschnitte zuletzt aufgeführt werden.
In den vorangegangenen Beispielen waren die dem Element TABLE (Tabelle) zugeordneten Eigenschaften border-collapse (Zusammenfallen von Zellenrahmen) und border-spacing (Abstände zwischen den Zellenrahmen) zu sehen. Mit diesen Werten kann man festlegen, wie sich die einzelnen Rahmen innerhalb einer Tabelle (Überschrift, Textkörper, Kopfzeile, Zellen, und so weiter) beeinflussen.
Abstand
Die Eigenschaft "border-spacing" (Rahmenabstand) erlaubt es, die Abstände zwischen den Rahmen aneinander grenzender Zellen zu bestimmen. Dabei sind ein oder zwei Werte zu bestimmen. Gibt man nur einen Wert an, wird dieser sowohl horizontal als auch vertikal angewandt. Bei Angabe von zwei Werten bestimmt der erste den horizontalen Abstand, der zweite den vertikalen Abstand. Die Werte dürfen nicht negativ sein. In den Beispielen wird ein Abstand von 10 Punkten verwendet. 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[4] 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.
URLs in diesem Artikel:
[1] = http:/
[2] = http:/
[3] = http:/
[4] = http:/