Deutsche Übersetzung der Seite "Web Style Sheets CSS tips & tricks"
Originale Version: http://www.w3.org/Style/Examples/007/evenodd.html
Aktuelle - übersetzte - Version: http://www.WSS-EXPERT.de/Style/Examples/007/evenodd.html
Übersetzer: A.Friedrich
Bookmark: AddThis Social Bookmark Button

Sehr geehrter Leser dieses Dokumentes - bitte beachten Sie dass es sich bei dieser Seite um die Übersetzung eines W3C Textes handelt.
Der Original Text ist urheberrechtlich geschützt, bitte beachten Sie die im Originaldokument vermerkten Hinweise. Die Rechte an der Übersetzung selbst liegen allein beim Übersetzer. Für eventuell vorhandene Fehler in der Übersetzung kann keine Gewähr übernommen werden, das einzig massgebliche und legitime Dokument ist das englische W3C Original.
Kommentare des Übersetzers sind als solche gekennzeichnet und unterliegen ebenfalls dem Copyright des Übersetzers. Diese sind nicht Bestandteil des englischen Originaldokumentes.

Web Style Sheets
CSS Tips & Tricks

(Diese Seite verwendet CSS Style Sheets)

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}
Monat199419951996199719981999200020012002
Jan141314131411111111
Feb131512151512141313
Mrz161514171615141515
Apr171617171715151616
Mai212020212220212019
Jun242325242523252324
Jul292826262726252625
Aug292827282827262826
Sep242323262424242221
Okt2022202220192022
Nov1817161716151415
Dez1513131413101311

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}
Monat199419951996199719981999200020012002
Jan141314131411111111
Feb131512151512141313
Mrz161514171615141515
Apr171617171715151616
Mai212020212220212019
Jun242325242523252324
Jul292826262726252625
Aug292827282827262826
Sep242323262424242221
Okt2022202220192022
Nov1817161716151415
Dez1513131413101311

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.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
created 6 Feb 2003;
last updated $Date: 2007/01/15 13:04:18 $ GMT

IMPRESSUM