Tabellen
Tabellen- und Zellenrahmen
Mit den CSS-Eigenschaften „border-width“, „border-style“ und „border-color“ kann der Rahmen von Tabellen und Tabellenfeldern definiert werden. Mit „border-width“ wird die Breite des Rahmens, mit „border-style“ der Rahmen-Stil und mit „border-color“ die Farbe des Rahmens definiert.
Für den Rahmen-Stil gibt es u. a. folgende Möglichkeiten:
-
none: keinen Rahmen
-
dotted: gepunktet
-
dashed: gestrichelt
-
solid: einfache Linie
-
double: doppelte Linie
-
groove: gekerbt
-
ridge: gegratet
-
inset: nach innen gewölbt
-
outset: nach außen gewölbt
Eine komplette Liste der Rahmen-Stile gibt es auf der Seite „CSS border-style property“ in der CSS-Referenz von w3schools.com.
CSS-Datei:
HTML-Datei:
Ergebnis im Browser:
Die Eigenschaften können auch für jede Seite des Rahmens getrennt angegeben werden. Werden zwei verschiedene Eigenschaften angegeben, wird die erste Eigenschaft für „oben und unten“ und die zweite für „rechts und links“ verwendet. Werden vier Eigenschaften angegeben werden die Rahmen in der Reihenfolge „oben“, „rechts“, „unten“, „links“ gesetzt:
CSS-Datei:
HTML-Datei:
Ergebnis im Browser:
Zur Definition von Rahmen gibt es auch die Shorthand-Property „border“, welche die drei zuvor vorgestellten Eigenschaften beinhaltet. Die drei Eigenschaften müssen dabei in folgender Reihenfolge angegeben werden:
- border-width
- border-style
- border-color
CSS-Datei:
HTML-Datei:
Ergebnis im Browser:
Mit der CSS-Eigenschaft „border-collapse“ kann definiert werden, ob die Rahmen von Tabelle und Tabellenfelder ineinander oder getrennt dargestellt werden. Dabei sind die Werte „separate“ (getrennt; Standard) und „collapse“ (ineinander) möglich:
CSS-Datei:
HTML-Datei:
Ergebnis im Browser:
Tabellen- und Zellengröße
Mit den CSS-Eigenschaften „width“ und „height“ kann die Größe von Tabellen und Tabellenfeldern festgelegt werden. Dabei können Werte in Pixel (px) und in Prozent (%) angegeben werden:
CSS-Datei:
HTML-Datei:
Ergebnis im Browser:
Textausrichtung in Tabellen
Mit der CSS-Eigenschaft „text-align“ kann der Text in Tabellenfeldern horizontal ausgerichtet werden. Dabei kann der Text die Werte „left“, „right“, „center“ und „justify“ annehmen. Mit der CSS-Eigenschaft „vertical-align“ kann der Text in Tabellenfelder vertikal ausgerichtet werden. Hier sind die Werte „top“, „bottom“ und „middle“ möglich:
CSS-Datei:
HTML-Datei:
Ergebnis im Browser:
Text- und Hintergrundfarbe
Mit den CSS-Eigenschaften „color“ und „background-color“ kann die Text- und Hintergrundfarbe von Tabellen und Tabellenfeldern definiert werden. Dabei können RGB-Werte in Dezimal- oder Hexadezimalzahlen sowie vorgegebene Farbbezeichnungen verwendet werden:
CSS-Datei:
HTML-Datei:
Ergebnis im Browser:
Hinweis: Für den Text von Tabellenfeldern können auch alle CSS-Eigenschaften für Text und Schrift verwendet werden!
Position des Tabellennamen
Mit der CSS-Eigenschaft „caption-side“ kann die Position eines Tabellennamen, der mit dem HTML-Element „caption“ erstellt wurde, festgelegt werden. Dabei sind die Werte „top“ (oben) und „bottom“ (unten) möglich:
CSS-Datei:
HTML-Datei:
Ergebnis im Browser:
Abschlussübung
Als Abschlussübung kannst du die Tabelle aus dem letzten Beispiel folgendermaßen anpassen:
Gehe dabei folgendermaßen vor:
- Der Rahmenstil soll auf „solid“ und die Rahmenfarbe auf die RGB-Werte „0,64,128“ gesetzt werden
- Die Textausrichtung in der Tabelle wird auf „links“ (left) gesetzt
- Die Überschrift soll den Schriftstil „fett“ (bold), die Schriftgröße „20 Pixel“ (px) und die Schriftart „Calibri“ bekommen
- Für die Hintergrundfarbe der Überschrift werden ebenfalls die RGB-Werte „0,64,128“ verwendet
- Für die Hintergrundfarbe der Tabellenzeilen werden abwechselnd die RGB-Werte „224,256,224“ und „196,224,196“ verwendet
- Für den Tabellennamen wird Schriftstil „fett“ (bold), Schriftgröße „20 Pixel“ und die Schriftart „Calibri“ verwendet
Die Lösung kannst du dir zur Kontrolle hier herunterladen:
