Corsi on-line

Tabelle a colori alternati con CSS3

In questo breve tutorial sarà esposta una procedura per la creazione di tabelle a colori alternati grazie alle potenzialità di CSS3; il principio sulla base del quale funzionerà la nostra tabella sarà abbastanza semplice, infatti, per semplificare la lettura dei dati esposti non vi saranno mai due record di fila evidenziati attraverso il medesimo colore; naturalmente l’esempio proposto potrà risultare particolarmente utile nel caso in cui si vadano a prelevare dinamicamente le informazioni esposte da sorgenti come per esempio i database.

Iniziamo subito con le regole di stile CSS, esse ci permetteranno di formattare la tabella tramite il selettore Nth-Child che in pratica renderà automatiche le operazioni di colorazione delle righe; a questo scopo basterà utilizzare gli attributi “even” e “odd” per specificare i differenti background:

<style type="text/css">
.nuovaTabella { width:100%; border-collapse:collapse;  }
.nuovaTabella td { padding:10px; border:#000 1px dashed; }

.nuovaTabella tr:nth-child(even) {
background: #D1FFA4;
}
.nuovaTabella tr:nth-child(odd) {
background: #AAFF58;
}
</style>

Fatto questo, realizzare la tabella a livello di markup sarà molto semplice, mentre la stilizzazione sarà affidata unicamente ad una chiamata alla classe “.nuovaTabella” specificata nel foglio di stile:

<table>
<tr>
<td>Info 1</td>
</tr>
<tr>
<td>Info 2</td>
</tr>
<tr>
<td>Info 3</td>
</tr>
<tr>
<td>Info 4</td>
</tr>
</table>

Il risultato finale delle nostre operazioni dovrebbe essere simile al seguente:

Cattura

Per maggiori informazioni sul funzionamento del selettore Nth-Child è possibile consultare l’apposita sezione del manuale pubblicato dal W3C.

Post correlati
I più letti del mese
Tematiche