CSS Kochbuch

8.9 Abwechselnde Hintergrundfarben für Tabellenspalten

Problem

Die Tabelle aus Abbildung 8-7 soll mit abwechselnden Hintergrundfarben versehen werden, wie in Abbildung 8-8 gezeigt.

Abbildung 8-7. Eine Tabelle ohne Hintergrundfarben für die Zellen

Lösung

Erstellen Sie für ungerade (engl. odd) Tabellenzeilen eine eigene Klasse:

tr {
 background-color: #eee;
}
tr.odd {
 background-color: #ccc;
}

Danach versehen Sie jede zweite Zeile der Tabelle mit dem entsprechenden class-Attribut, das den Wert odd erhält:

<tr>
...
</tr>
<tr class="odd">
...
</tr>
<tr>
...
</tr>
<tr class="odd">
...
</tr>
... und so weiter ...

Abbildung 8-8. Tabellenzeilen mit abwechselnden ...