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: