Introduzione: tabelle a righe di colore alterno con i CSS3

L'effetto di rendere le righe di una tabella di colore alternato, è pensato per migliorare l'usabilità di una tabella accompagnando l'occhio dell'utente lungo la riga. Questo metodo è stato utilizzato per anni nella stampa delle pagine e molti designers cercano di emulare questa tecnica quando realizzano le tabelle per il Web. I CSS hanno reso possibile l'emulazione di queste tabelle "zebrate" ma, fino fino a prima dell'arrivo dei CSS 3 si doveva scrivere un pò di codice in più.

Con l'introduzione dei CSS 3 ed il selettore nth-child, si è in grado di indirizzare più elementi in un documento mediante la creazione di un "contatore" che salta più "figli" indicati nell'albero del documento. Questo ci consente, in particolare, di formattare solo le riga dispari - o pari - di una tabella. Questo articolo spiega come utilizzare il selettore nth-child in maniera ottimale.

Download del codice degli esempi per l'articolo in oggetto. [Cartella .zip - 3 Kb]

La cattive abitudini dei vecchi tempi...

Prima di cominciare a vedere l'utilizzo di questo nuovo selettore, diamo una ripassata al vecchio modo. Per prima cosa si deve aggiungere una classe ad ogni riga di tabella:

<table>  
   <tr valign="top" class="odd">  
   <td>Salmon</td>   
   <td>Omega-3's help the brain develop properly, reduce the risk of Alzheimer's, and help prevent heart disease.</td>   
   </tr>  
   <tr valign="top">  
   <td>Spinach</td>  
   <td>Great source of folate and lutein. Prevents birth defects, heart disease, stroke, and protects your skin from sun damage.</td>   
   </tr>   
   <tr valign="top" class="odd">   
   <td>Sweet Potatoes</td>   
   <td>Beta carotene protects your skin from sun damage.</td>   
   </tr> 
</table> 

Per fortuna abbiamo una tabella composta da poche righe che non richiede molto codice. Si immagini, invece, come sarebbe noioso se la tabella ne contenesse a decine! Dovremmo aggiungere una regola CSS "mirata" per quelle determinate righe:

tr.odd{ 
background-color: #99ff99; 
}

Anche se questo metodo funziona, è un pò inefficente in quanto richiede markup extra nel documento HTML. Questo codice, a sua volta, non aggiunge nulla di più dal punto di vista semantico: le righe dispari non hanno una funzione diversa dalle righe pari; le si vogliono rendere solo differenti in fatto di formattazione. Di conseguenza non sono state separate struttura e presentazione. Per non parlare del codice che potrebbe essere molto lungo da scrivere se fossimo in presenza di una tabella con molti dati.

Introduzione del selettore nth-child

I CSS 3, tuttavia, contengono dei selettori che ci permettono di non scrivere molto codice e scegliere su quali righe applicare lo stile desiderato. Il selettore nth-child è un pò complicato; prendiamoci una pausa, quindi, per capire come funziona.

Il selettore nth-child raggiunge gli elementi nell'albero del documento che hanno un certo numero di fratelli dinanzi ad esso. Per n si intende un numero intero; con :nth-child(an+b) si vuole indicare l'elemento che ha an+b-1 fratelli prima di esso.

Che cosa significa?

n è fondamentalmente un contatore: comincia da zero ed incrementa gradualmente fino a quando non finiscono gli elementi "figli". La variabile b rappresenta la posizione di partenza - in altri termini, la posizione del primo elemento da cui cominciare a contare. Infine la variabile a rappresenta la posizione degli elementi corrispondenti dopo di essa.

Per evitare un pò di confusione, facciamo un piccolo esempio:

:nth-child(5n+2)

Nell'ipotetico esempio descritto più su la variabile b è impostata a 2; questo significa che il primo elemento è il secondo figlio nell'albero del documento, il secondo paragrafo nel body o la seconda voce di una lista.

Sempre dall'esempio precedente, la variabile a è impostata a 5 il che significa che ogni quinto "elemento figlio" rappresenta l'elemento di che ci interessa. Adesso che sono statre definite le variabili a e b, siamo in grado di determinare quali elementi figli saranno formattati con i CSS. Assumendo come valore di partenza uguale a zero e contando fino all'ultimo "elemento figlio", siamo in grado di determinare quali righe saranno stilizzate.

Nell'esempio della Tabella 1, si possono vedere come sono stai "raggiunti" il secondo "elemento figlio", il settimo, il dodicesimo e così via, fino al termine degli elementi stessi.

Quale elemento figlio è selezionato?
Elemento Figlio Formule
n 5n 5n+2
n/a n/a
1 Y
2 Y Y
3 Y
4 Y
5 Y Y
6 Y
7 Y Y
8 Y
9 Y
10 Y Y
11 Y
12 Y Y

Tabella 1: Dimostrazione di quali elementi figlio sono selezionati

Calcolo delle righe colorate

Come funziona questo selettore? Da notare che questa formula - molto versatile - permette alcune configurazioni piuttosto complicate. Per raggiungere le righe pari o dispari, tuttavia, abbiamo bisogno di ricordare solo due tipi di selettori. Per raggiungere tutte le righe come in Tabella 2, si può utilizzare il seguente selettore:

tr:nth-child(2n)
Quale elemento figlio è selezionato?
Elemento Figlio Formule
n 2n
n/a n/a
1 Y
2 Y Y
3 Y
4 Y Y
5 Y
6 Y Y
7 Y
8 Y Y
9 Y
10 Y Y
11 Y
12 Y Y

Tabella 2: Selezione di elementi figli raggiunti con i soli numeri di riga

Per selezionare tutte le righe dispari, si deve scrivere il seguente codice:

tr:nth-child(2n+1)

Questo selettore parte dalla prima riga all'interno della tabella, dopo ogni due righe ragiunge le righe dispari, come mostrato nella Tabella 3.

Quale elemento figlio è selezionato?
Elemento Figlio Formule
n 2n 2n+1
n/a n/a
1 Y Y
2 Y Y
3 Y   Y
4 Y Y
5 Y Y
6 Y Y
7 Y Y
8 Y Y
9 Y Y
10 Y Y
11 Y Y
12 Y Y

Tabella 3: Selezione di righe con numero dispari

Dimostrazione con le righe di colore alterno

La figura 1 mostra una tabella la quale elenca alcuni "super-cibi" ed i loro valori nutrizionali, quale dimostrazione delle righe con colore alterno.

Immagine della tabella html senza sfondi colorati
Figura 1: la tabella HTML

In questo esempio si vuole rendere di colore verde lo sfondo delle celle dispari, come nella Figura 2.

Immagine della tabella html con sfondi colorati alternati
Figura 2: solo le celle dispari sono formattate

Se queste formule sono un pò complicate da ricordare, la proprietà nth-child consente l'uso di parole chiave come scelte rapide. Invece di una formula matematica, si possono usare parole chiave quali "dispari" o "pari" per indicare un valore:

tr:nth-child(odd) 
{ 
background-color: #99ff99;
}

I CSS 3 consentono la semplificazione per rendere le tabelle con righe colorate alternate, le voci di lista, form e così via.

Sfortunatamente il selettore nth-child ha un supporto limitato da parte dei browser. Il presente articolo ha funzionato in Safari 3 ed Opera 9.5. Se si volesse rispettare in maniera corretta il codice lo si deve scrivere così come è, fino a quando la proprietà è supportata pienamente dagli altri browser. Se si desidera il supporto da parte anche di Internet Explorer con il metodo delle righe alternate, è possibile adottare la patch per il selettore nth-child per quel tipo di browser. Utilizzando il framework JavaScript jQuery è possibile fornire tale soluzione attraverso i commenti condizionali solo per IE, mentre gli altri browser usano le regole CSS per la formattazione della pagina.

Tabella di esempio Supercibi

Se si dispone di un browser che supporta il selettore nth-child, la tabella di esempio apparirà a righe di colore alterno. Per poter vedere il codice CSS, basta guardare nella head del documento.