Abwechselnde Hintergrundfarben für Tabellenspalten

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Die Tabelle aus der nächsten Abbildung soll mit abwechselnden Hintergrundfarben versehen werden, wie in der übernächsten Abbildung gezeigt.

Tabelle ohne Hintergrundfarben für die Zellen

Abbildung: 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... -->

Tabellenzeilen mit abwechselnden Hintergrundfarben

Abbildung: Tabellenzeilen mit abwechselnden Hintergrundfarben.

Diskussion

Jedes zweite tr-Element manuell mit einem class-Attribut zu versehen kann besonders bei langen Tabellen recht mühsam sein. Dafür funktioniert diese Technik mit allen CSS-fähigen Browsern.

Eine zweite Lösung kommt ohne zusätzlichen Markup-Code in der HTML-Tabelle aus. Sie verwendet die in der Spezifikation für CSS 3 definierte Pseudoklasse :nth-child:

tr {
 background-color: #eee;
}
tr:nth-child(odd) {
 background-color: #ccc;
}

Allerdings ist die Unterstützung für CSS 3, also auch für :nth-child, im Internet Explorer 6 für Windows und dessen Vorgängerversionen sehr begrenzt. Bis alle Browser unterstützt werden, ist dieses Verfahren daher vermutlich nicht so gut geeignet.

JavaScript

Andere Lösungen gehen über die reine Verwendung von CSS hinaus. Eine Möglichkeit, abwechselnde Hintergrundfarben für Tabellenzeilen zu benutzen, stützt sich beispielsweise auf JavaScript-Code, der mit dem Document Object Model (DOM) interagiert und die Stile automatisch auf jede zweite Tabellenzeile anwendet. Ein Beispiel für solch eine Lösung finden Sie unter A List Apart: Zebra Tables. Der Nachteil dieser Vorgehensweise besteht darin, dass sie nur funktioniert, wenn der Benutzer in seinem Browser JavaScript auch aktiviert hat.

Serverseitige Lösungen

Eine weitere Lösung besteht in der Verwendung einer serverseitigen Programmiersprache wie PHP oder ColdFusion. Mit einem einfachen Skript können Sie die Erzeugung der Tabelle automatisieren. (Diese Technik ist auch dann vorteilhaft, wenn ein Datenbank-Backend für die Erzeugung und Verwaltung der Tabellendaten verwendet wird.)

Siehe auch

Die CSS 3-Spezifikation für den Pseudoklassen-Selektor :nth-child.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln