Tabellen und Rahmen mit CSS gestalten

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 basiert auf dem HTML-4.01-Tabellenmodell. 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 einer HTML-Tabelle wurde unlängst erklärt.

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;