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 Werteleft“, „right“, „center“ und „justify“ annehmen. Mit der CSS-Eigenschaft „vertical-align“ kann der Text in Tabellenfelder vertikal ausgerichtet werden. Hier sind die Wertetop“, „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 Wertetop“ (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:

Download
Tables9.css
Cascading Style Sheet Datei 557 Bytes
Download
Tables9.html
HTML Dokument 846 Bytes

Quellen