Zebra-Tabelle mit CSS

Was ist eine Zebra-Tabelle? Das ist eine HTML-Tabelle in der jede Tabellenzeile eine andere Farbe hat. Durch diese Hervorhebung lassen sich die Daten in der Tabelle schneller erfassen, besonders bei langen Tabellen ist dies hilfreich.

Beispiel:

CSS-Angabe:

<style>
tr:nth-child(even) {
 background-color: #FFFFFF;
}
tr:nth-child(odd) {
 background-color: #FFD2A6;
}
</style>

Beispiel:

CSS-Angabe:

<style>
th:nth-child(even),
td:nth-child(even) {
 background-color: #FFFFFF;
}
th:nth-child(odd),
td:nth-child(odd) {
 background-color: #FFD2A6;
}
</style>

Mit CSS3 wurden neue Pseudo-Selektorern wie :last-child, :nth-child(), :empty und :disabled eingeführt. Mit :nth-child() zeigen zum Beispiel aufeinander folgende Tabellenreihen/Tabellenspalten abwechselnde Hintergrundfarben an.

Aktuelle Tabellenzeile hervorheben

Wenn man sich mit dem Mauszeiger über einer Tabellenzeile befindet, soll diese hervorgehoben werden. Dies funktioniert ohne JavaScript sondern mit der CSS Pseudo-Klasse :hover.

Beispiel:

CSS-Angabe:

<style>
tr:nth-child(even) {
 background-color: #FFFFFF;
}
tr:nth-child(odd) {
 background-color: #FFD2A6;
}
tr:hover {
 background-color: #FFEFD5;
}
</style>

Aktuelle Tabellenspalte hervorheben

Wenn man sich mit dem Mauszeiger über einer Tabellenzeile befindet, soll diese zusammen mit der Tabellenspalte hervorgehoben werden.

Beispiel:

CSS-Angabe:

<style>
tr:nth-child(even) {
 background-color: #FFFFFF;
}
tr:nth-child(odd) {
 background-color: #FFD2A6;
}
tr:hover {
 background-color: #FFEFD5;
}
td:hover {
 background-color: #FFDEAD;
}
</style>

Textabsätze und Aufzählungslisten hervorheben

Mit dem Pseudo-Selektor :nth-child können nicht nur Tabellenzeilen hervorgehoben werden, sondern unter anderem auch HTML-Elemente wie Textabsätze <p> und Aufzählungslisten <ul>.

Beispiel mit Textabsätzen:

David Brittain

Ruslan Belkin

Margaret Melton

Shuichiro Inomata

CSS-Angabe:

<style>
p:nth-child(even) {
 background-color: #ADD8E6;
}
p:nth-child(odd) {
 background-color: #F08080;
}
</style>

Beispiel mit einer Aufzählungsliste:

1. David Brittain
2. Ruslan Belkin
3. Mohomodou Houssouba
4. Shuichiro Inomata
5. Margaret Melton

CSS-Angabe:

<style>
li:nth-child(even) {
 background-color: #FFEFD5;
}
li:nth-child(odd) {
 background-color: #FFDEAD;
}
</style>