Fogli di Stile per il Web
suggerimenti & trucchi sui CSS

Status

Attenzione: nel momento in cui scrivo (Febbraio 2003), i più importanti browser non supportano ancora il selettore 'nth-child' (introdotto in Novembre 2001) e solo pochissimi supportano l'elemento COL.

righe pari e dispari

Un modo per migliorare la leggibilità delle grosse tabelle è colorarle a righe alternate. Per esempio, la tabella sotto ha un grigio chiaro di sfondo per le righe pari e un bianco per quelle dispari. Le regole per ottenere questo sono estremamente semplici:

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

Month	1994	1995	1996	1997	1998	1999	2000	2001	2002
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 realtà, i CSS non permettono solo l'alternanza pari/dispari, ma ad intervalli arbitrari. Le keyword 'even' (pari) e 'odd' (dispari) sono solo comode scorciatoie. Per esempio, per una lunga lista si potrebbe fare così:

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

Questo ci dice che ogni 5 elementi della lista uno è in grassetto, a partire dal terzo. In altre parole, gli elementi con numero 3, 8, 13, 18, 23, etc., saranno in grassetto.

colonne pari e dispari

Lo stesso funziona anche per le colonne di una tabella, però ci deve essere un elemento del documento che corrisponde alle colonne. Lo HTML fornisce allo scopo l'elemento COL. La tabella deve iniziare con un COL per ogni colonna:

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

(COL può essere usato per altro oltre che con uno stile, ma in questo caso tutto quello di cui abbiamo bisogno è che gli elementi COL siano presenti.) Le seguenti regole danno alla prima colonna uno sfondo giallo, e uno sfondo grigio una colonna si e una no a partire dalla terza.

col:first-child {background: #FF0}
col:nth-child(2n+3) {background: #CCC}

Month	1994	1995	1996	1997	1998	1999	2000	2001	2002
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

Lo sfondo delle righe (TR) è disegnato sopra lo sfondo delle colonne (COL), perciò se si vuol essere sicuri che lo sfondo delle colonne sia visibile, non si dovrebbe impostare lo sfondo per le righe.