Tabellen und Rahmen mit CSS gestalten

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.

Themenseiten: Software, Webentwicklung

Fanden Sie diesen Artikel nützlich?
Content Loading ...
Whitepaper

Artikel empfehlen:

Neueste Kommentare 

1 Kommentar zu Tabellen und Rahmen mit CSS gestalten

Kommentar hinzufügen
  • Am 10. August 2012 um 11:04 von test

    danke.war sehr hilfreich!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *