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:
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;
Unternehmen greifen von überall aus auf die Cloud und Applikationen zu. Dementsprechend reicht das Burg-Prinzip…
Hacker nutzen eine jetzt gepatchte Schwachstelle im Google-Browser bereits aktiv aus. Die neue Chrome-Version stopft…
Microsoft bietet seit Anfang der Woche einen Patch für die Lücke. Kaspersky-Forscher gehen davon aus,…
Das jüngste Update bringt insgesamt zwölf Fixes. Schadcode lässt sich unter Umständen ohne Interaktion mit…
Eine softwarebasierte Workstation soll es Ingenieuren erlauben, sämtliche Steuerungen zentral zu verwalten. Pilotkunde ist Ford.
Kryptodiebstahl und finanzieller Gewinn sind laut ESET-Forschungsbericht die vorrangigen neuen Ziele.