1515 Stimmen

CSS: Tabellenzeilen abwechselnd einfärben nur mit CSS

Tutorial von Stefan Trost | Letztes Update am 19.06.2023 | Erstellt am 22.05.2012

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:

Zeile 1Farbe AText
Zeile 2Farbe BText
Zeile 3Farbe AText
Zeile 4Farbe BText
Zeile 5Farbe AText

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.

AntwortenPositivNegativ

Über den Autor

AvatarSoftware von Stefan Trost finden Sie auf sttmedia.de. Benötigen Sie eine individuelle Software nach Ihren eigenen Wünschen? Schreiben Sie uns: sttmedia.de/kontakt
Profil anzeigen

 

Ähnliche Themen

CSS-Stylesheets in HTML einbinden

Tutorial | 0 Kommentare

Wichtiger Hinweis

Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.

Jetzt mitmachen

Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.