CSS: Tabellenzeilen abwechselnd einfärben nur mit CSS

Bei Tabellen ohne Rand kann es oft recht hilfreich sein, die Zeilen der Tabelle abwechselnd in einer anderen Farbe einzufärben, damit eine Zeile leichter zu lesen ist und die Tabelle insgesamt übersichtlicher aussieht.

Ein Beispiel dafür sehen wir hier:

Wollen wir das Beispiel umsetzen, stehen wir vor dem Problem, dass es unter Umständen ewig dauern kann, bis wir allen Zeilen per Hand mit den entsprechenden Regeln eingefärbt haben. Gerade wenn wir eine Homepage betreiben, die sehr viele Tabellen beinhaltet, die möglicherweise auch noch regelmäßig geändert werden müssen, bedeutet das eine Menge Arbeit.

Zum Glück gibt es allerdings eine Lösung, wie wir das ganze mit CSS lösen können.

Tabellenzeilen mit CSS formatieren

Schauen wir uns die folgende CSS-Regel an:

tr:nth-child(even) {
   background-color: #FD9D5D;
}
tr:nth-child(odd) {
   background-color: #C0F390;
}
table {
   border-spacing: 0px;
}

Der CSS Selektor nth-child macht es möglich das so und so vielte eines Elements anzusprechen. Im Beispiel beziehen wir uns auf das Element tr, das unsere Tabellenzeile ist. Wir benutzen "even", um allen geraden Zeilen eine Farbe zuzuweisen und "odd", um allen ungeraden Zeilen eine andere Farbe zuzuweisen. So erreichen wir unsere abwechselnde Färbung der einzelnen Zeilen. Natürlich kann man auch nur "even" oder "odd" Zeilen formatieren, um die jeweils andere Zeile so zu lassen wie der Hintergrund.

Zusätzlich setzen wir das border-spacing aller Tabellen auf 0 Pixel. Das bewirkt, das unschöne "Trennstriche" zwischen den einzelnen Zellen der Tabelle verschwinden. Wenn man diese dagegen wünscht, kann man diese CSS Regel natürlich auch weglassen.

Browser-Unterstützung

Der benötigte CSS Selektor nth-child wird von Opera, Chrome, Safari, Firefox ab Version 3.5, sowie dem Internet Explorer leider erst ab Version 9 unterstützt. Die alten Internet Explorer Versionen 6, 7 und 8, die leider doch noch manchmal im Einsatz sind, unterstützen den Selektor nicht. In diesen Browsern erscheinen die Felder ungefärbt.

Für den Fall, das man die Tabelle dynamisch mit PHP erstellt, kann man sich auch dem Tipp Tabellenzeilen mit PHP einfärben bedienen. In diesem Tipp wird erklärt, wie man die Zeilen einer Tabelle mit Hilfe von PHP einfärbt, was dann auch in den anderen Browsern zu sehen sein wird.