Tabellenzeilen dynamisch einfärben

Veröffentlicht am von — Keine Kommentare ↓

Im WorldWideWeb findet man immer wieder den typischen “Zebra-Stil” bei Tabellen. Gemeint ist damit, dass jede zweite Zeile eingefärbt ist. Wie du diesen Effekt per CSS erzeugst, erfährst du in diesem Tutorial:

dynamisch gefärbte Tabelle

Anlegen der Tabelle

Zu Beginn brauchen wir eine einfach Tabelle:

<table>
<tr><td>Erste</td><td>Zeile</td></tr>
<tr><td>Zweite</td><td>Zeile</td></tr>
<tr><td>Dritte</td><td>Zeile</td></tr>
</table>

Zeilen einfärben

Um die Zeilen dynamisch einzufärben, greifen wir auf CSS zurück:

<style type="text/css">
table tr:nth-child(even) {
    background-color: #00FF00;
}
</style>

Dieser Code kann natürlich erweitert werden, um bspw. die Schriftgröße jeder zweiten Zeile unterschiedlich zu gestalten oder einen schöneren Farbton zu verwenden.

Browserkompatibilität

Zurzeit wird der Befehl noch nicht von allen Browsern unterstützt. Funktionieren wird es derzeit auf jeden Fall mit Firefox, Safari, Opera und Chrome. In diesem Fall hinkt der Internet-Explorer wieder hinterher, also müsste man in diesem Fall auf eine Alternative zurückgreifen. (IE9 unterstützt nth-child nun.)

Schreibe einen Kommentar