Talen

Dit is een vertaling. Hij kan fouten bevatten of verouderd zijn t.o.v. de Engelse versie. Vertaler: Saffier Verkaik

Web Style Sheets CSS tips & trucs

Zie ook de index van alle tips.

Status

Waarschuwing: op het moment van schrijven (februari 2003), ondersteunen de meeste browsers de nth-child’ selector (geïntroduceerd in november 2001) nog niet en slechts enkelen ondersteunen het COL element.

Even en oneven regels

Eén manier om de leesbaarheid van grote tabellen te verbeteren is het om en om kleuren van de rijen. Bijvoorbeeld, de onderstaande tabel heeft een lichtgrijze achtergrond voor de even rijen en een witte voor de oneven rijen. De regels hiervoor zijn extreem eenvoudig: 

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
Month '94 '95 '96 '97 '98 '99 '00 '01 '02
Jan 14 13 14 13 14 11 11 11 11
Feb 13 15 12 15 15 12 14 13 13
Mar 16 15 14 17 16 15 14 15 15
Apr 17 16 17 17 17 15 15 16 16
May 21 20 20 21 22 20 21 20 19
Jun 24 23 25 24 25 23 25 23 24
Jul 29 28 26 26 27 26 25 26 25
Aug 29 28 27 28 28 27 26 28 26
Sep 24 23 23 26 24 24 24 22 21
Oct 20 22 20 22 20 19 20 22
Nov 18 17 16 17 16 15 14 15
Dec 15 13 13 14 13 10 13 11

In feite staat CSS niet alleen even/oneven wisselingen toe, maar ook willekeurige intervallen. De trefwoorden "even" en "oneven" zijn slechts handige snelschriften. Voor een lange lijst kunt u bijvoorbeeld dit doen: 

li:nth-child(5n+3) {font-weight: bold}

Dit betekent dat elke 5de item in de lijst vet is, beginnend bij het 3de item. Met andere woorden, de items 3, 8, 13, 18, 23, etc., zullen vet zijn.

Even en oneven kolommen

Hetzelfde geldt ook voor tabel kolommen, maar dan moet er een element in het document zijn dat correspondeert met de kolom. HTML gebruikt hier COL voor. De tabel moet starten met één COL voor iedere kolom: 

<table>
<col><col><col><col><col><col><col><col><col><col>
<tr><th>Month<th>1994<th>1995<th>1996...

(COL kan gebruikt worden voor andere dingen dan style, maar in dit geval is in ieder geval nodig dat de COL elementen aanwezig zijn.) De volgende regels geven de eerste kolom een gele achtergrond, en dan elke volgende kolom een grijze achtergrond, beginnend vanaf de 3de kolom: 

col:first-child {background: #FF0}
col:nth-child(2n+3) {background: #CCC}
Month '94 '95 '96 '97 '98 '99 '00 '01 '02
Jan 14 13 14 13 14 11 11 11 11
Feb 13 15 12 15 15 12 14 13 13
Mar 16 15 14 17 16 15 14 15 15
Apr 17 16 17 17 17 15 15 16 16
May 21 20 20 21 22 20 21 20 19
Jun 24 23 25 24 25 23 25 23 24
Jul 29 28 26 26 27 26 25 26 25
Aug 29 28 27 28 28 27 26 28 26
Sep 24 23 23 26 24 24 24 22 21
Oct 20 22 20 22 20 19 20 22
Nov 18 17 16 17 16 15 14 15
Dec 15 13 13 14 13 10 13 11

De achtergrond van de rijen (TR) staat voor de achtergrond van de kolommen (COL), dus wanneer u wilt dat de achtergrond van de kolommen zichtbaar is, moet u geen achtergrond voor de rijen gebruiken.

Bert Bos, leider stijl-activiteiten
Copyright © 1994–2021 W3C® Privacy

Geschreven 6 februari 2003;
laatste wijziging wo 06 jan 2021 05:40:49 UTC

Talen

Over de vertalingen