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:
David Brittain | 6237-56258 |
Ruslan Belkin | 1684-73345 |
Mohomodou Houssouba | 8855-52111 |
Shuichiro Inomata | 737-55756 |
Margaret Melton | 728-793544 |
CSS-Angabe:
<style> tr:nth-child(even) { background-color: #FFFFFF; } tr:nth-child(odd) { background-color: #FFD2A6; } </style>
Beispiel:
Name | Tel | Stadt | Land |
---|---|---|---|
David Brittain | 6237-56258 | London | UK |
Ruslan Belkin | 1684-73345 | Moskau | RU |
Mohomodou Houssouba | 8855-52111 | Nairobi | KE |
Shuichiro Inomata | 737-55756 | Tokio | JP |
Margaret Melton | 728-793544 | Sidney | AU |
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:
David Brittain | 6237-56258 |
Ruslan Belkin | 1684-73345 |
Mohomodou Houssouba | 8855-52111 |
Shuichiro Inomata | 737-55756 |
Margaret Melton | 728-793544 |
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:
David Brittain | 6237-56258 |
Ruslan Belkin | 1684-73345 |
Mohomodou Houssouba | 8855-52111 |
Shuichiro Inomata | 737-55756 |
Margaret Melton | 728-793544 |
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:
- David Brittain
- Ruslan Belkin
- Mohomodou Houssouba
- Shuichiro Inomata
- Margaret Melton
CSS-Angabe:
<style> li:nth-child(even) { background-color: #FFEFD5; } li:nth-child(odd) { background-color: #FFDEAD; } </style>