Hintergrundfarbe mit even-odd

Bedienerfreundliche Tabellen - Tipp 1

  Mit einer kleinen Trickserei mit der CSS-Pseudo-Klasse :nth-child() werden Tabellen viel schneller erfassbar und besser lesbar. Solche Dinger werden auch "Zebra-Tabellen" genannt.

Even and odd übersetzt man mit "gerade und ungerade".

/* Zebra Tabellen */
tr:nth-child(even) {
	background-color: lavender;
}

tr:nth-child(odd) {
	background-color: lightcyan;
}

Vorschau (formatiert)

1 Aloisia Lanphere Female
2 Flynn Dwane Male
3 Layton Grevel Female
4 Mira Slessor Male
5 Sybila Bromby Female
6 Lyle Blackborow Male
7 Robinet Levin Genderfluid
8 Adore Sallings Genderqueer
9 Bliss Reeder Male
10 Peadar Ruzic Female
11 Agnella Le Merchant Male
12 Edward Stockney Female
13 Catarina De Vaan Male
14 Mina MacPharlain Genderqueer
15 Maurene Bulman Agender
16 Larisa St Leger Male
17 Markus Largent Male
18 Yule Petters Male
19 Dell Barten Male
20 Evan Stansby Female
21 Wake Caberas Female
22 Ronnie Gajownik Male
23 Jeri Pitman Female
24 Alicea Grimestone Female
25 Danika Bourgour Genderqueer
26 Aubrey Straffon Female
27 Aubry Doore Genderqueer
28 Gaile Dunnan Male
29 Madalyn Sharphurst Male
30 Carson Griffin Male