Tabella con righe di colore alterno

Le tabelle con righe di colore alternato, di certo, non sono una novità e se ne discute, e mette in atto, da molto tempo. Si presume che aiutino l'usabilità della lettura dei dati offrendo all'utente un mezzo per differenziare e separare le righe, le une dalle altre. 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 righe dispari - o pari - di una tabella. Il presente articolo affronta l'utilizzo del selettore nth-child.

Le cattive abitudini dei vecchi tempi

Prima di cominciare a vedere l'utilizzo di questo selettore, vediamo quale era il vecchio metodo. Si aggiunge una classe per ogni elemento <tr> da differenziare rispetto alle altre righe.

<table>  
   <tr class="odd">  
   <td>Lorem...</td>   
   <td>Lorem ipsum dolor sit amet.....</td>   
   </tr>  
   <tr>  
   <td>Lorem...</td>  
   <td>Lorem ipsum dolor sit amet.....</td>     
   </tr>   
   <tr class="odd">   
   <td>Lorem...</td>  
   <td>Lorem ipsum dolor sit amet.....</td>
   </tr> 
</table> 

Fortunatamente, quella dell'esempio, è una tabella con poche righe che non richiede molto codice. Immaginiamo quanto sarebbe noioso se la tabella ne contenesse a decine! Dovremmo aggiungere una regola CSS "mirata" per quelle determinate righe:

tr.odd{ 
background-color:#9f9; 
}

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 dell'immagine 1, si possono vedere come sono stati "raggiunti" il secondo "elemento figlio", il settimo, il dodicesimo e così via, fino al termine degli elementi stessi.

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 Figura 2, si può utilizzare il seguente selettore:

tr:nth-child(2n)

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 Figura 3.

Dimostrazione con righe di colore alterno

L'immagine successiva mostra una tabella la quale elenca alcuni "super-cibi" ed i loro valori nutrizionali, quale dimostrazione delle righe con colore alterno.

L'immagine successiva mostra la stessa tabella con sfondo di colore verde, sulle celle dispari:

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.