Striped Tables mit CSS

Heute mal eine ganz kleine, aber doch brauchbare Hilfestellung für den alltäglichen Einsatz:

Gestreifte Tabellen mit CSS

Gestreifte Tabellen, auch „striped tables“ oder „Zebra-Tabellen“ genannt, können ganz einfach mit dem CSS-Selektor nth-of-type umgesetzt werden.

Mit dem folgenden CSS-Code können alle Tabellen mit der Klasse „zebra“ gestreift dargestellt werden. Der Selektor sorgt dafür, dass alle geraden (also 2., 4., 6., usw.) Zeilen farbig hinterlegt werden.

Wer alle Tabellen so darstellen möchte, entfernt einfach die Klasse „.zebra“ aus dem CSS. Dann sieht das ganze so aus:

Und so sieht dann die Tabelle aus.

striped tables mit css3
Striped Tables mit CSS3