Web Style Sheets
CSS Tips & Tricks

Status

Achtung: zum aktuellen Zeitpunkt (Februar 2003) unterstützen die meissten Browser noch nicht den 'nth-child' Selektor (eingeführt November 2001) und nur sehr wenige unterstützen das COL Element.

Gerade/Ungerade: Farben ändern beim Zeilenwechsel

Ein Weg um lange Tabellen lesbarer zu gestalten ist die Farben der Zeilen abwechselnd zu verändern. So verwendet z.B. die Tabelle weiter unten einen hellgrauen Hintergrund für gerade Zeilennummern und einen weissen für die Ungeraden. Die Regeln für dieses Bespiel sind sehr einfach:

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

Monat	1994	1995	1996	1997	1998	1999	2000	2001	2002
Jan	14	13	14	13	14	11	11	11	11
Feb	13	15	12	15	15	12	14	13	13
Mrz	16	15	14	17	16	15	14	15	15
Apr	17	16	17	17	17	15	15	16	16
Mai	21	20	20	21	22	20	21	20	19
Jun	24	23	25	24	25	23	25	23	24
Jul	29	28	26	26	27	26	25	26	25
Aug	29	28	27	28	28	27	26	28	26
Sep	24	23	23	26	24	24	24	22	21
Okt	20	22	20	22	20	19	20	22
Nov	18	17	16	17	16	15	14	15
Dez	15	13	13	14	13	10	13	11

Tatsache ist dass CSS nicht nur einen Wechsel von gerade/ungerade unterstützt sondern dass sich auch beliebig andere Intervalle festlegen lassen. Die Schlüsselwörter 'even' und 'odd' dienen nur als Kurzformen für ein häufig genutztes Feature. Zum Beispiel könnten Sie auch das Folgende machen:

li:nth-child(5n+3) {font-weight: bold}

Auf diese Weise wird der Text jeder 5. Zeile fett dargestellt - beginnend bei der dritten Zeile. Oder anders ausgedrückt - die Zeilen 3, 8, 13, 23 etc. werden fetten Text enthalten.

Gerade und ungerade Spalten

Das Ganze funktioniert auch mit Tabellenspalten. Aber hier muss am Tabellenanfang mit Hilfe des HTML Elementes COL die Anzahl der Spalten festgelegt werden. Für jede Spalte muss somit ein COL festgelegt werden:

<table>
<col><col><col><col><col><col><col><col><col><col>
<tr><th>Monat<th>1994<th>1995<th>1996...

(COL kann auch für andere Dinge als CSS verwendet werden, aber hier kommt es nur darauf an dass für jede Spalte ein COL vorhanden ist.) Die folgenden Regeln versehen die erste Spalte mit einem gelben Hintergrund und dann jeder weiteren Spalte ab Spalte 3 einen grauen:

col:first-child {background: #FF0}
col:nth-child(2n+3) {background: #CCC}

Monat	1994	1995	1996	1997	1998	1999	2000	2001	2002
Jan	14	13	14	13	14	11	11	11	11
Feb	13	15	12	15	15	12	14	13	13
Mrz	16	15	14	17	16	15	14	15	15
Apr	17	16	17	17	17	15	15	16	16
Mai	21	20	20	21	22	20	21	20	19
Jun	24	23	25	24	25	23	25	23	24
Jul	29	28	26	26	27	26	25	26	25
Aug	29	28	27	28	28	27	26	28	26
Sep	24	23	23	26	24	24	24	22	21
Okt	20	22	20	22	20	19	20	22
Nov	18	17	16	17	16	15	14	15
Dez	15	13	13	14	13	10	13	11

Der Hintergrund der Zeilen (TR) wird vor den Hintergrund der Spalten (COL) gezeichnet. Stellen Sie also sicher dass für die Zeilen kein Hintergrund gesetzt wurde wenn Sie den Spaltenhintergrund auch sehen wollen.