In una precedente lezione di questa guida abbiamo visto come visualizzare una tabella alternando i colori delle righe; abbiamo visto che utilizzando una classe da assegnare alle sole righe pari (o dispari) possiamo migliorare la leggibilità delle nostre tabelle.
In questa lezione vedremo come alternare il colore di sfondo delle colonne.
La prima soluzione a cui si pensa è quella di applicare la tecnica utilizzata per le righe anche per le colonne, quindi utilizzando una classe CSS da assegnare ai soli elementi <td> pari o dispari. Questa tecnica però presenta diversi svantaggi, soprattutto se si ha la necessità di creare la tabella dinamicamente con un linguaggio server-side.
Una soluzione più semplice e, soprattutto, molto più veloce consiste nell’utilizzare l’elemento col all’interno della tabella.
L’elemento col
L’elemento <col> inserito all’interno di una tabella subito dopo il tag <table> e prima delle righe consente di settare le proprietà delle singole colonne della tabella.
Utilizzeremo questo elemento per assegnare una classe alle singole colonne. Inseriremo tanti <col /> quante sono le colonne della tabella e assegneremo la classe even a quelle che si trovano nella posizione pari.
Il codice HTML della tabella è il seguente:
<table>
<col />
<col class="even" />
<col />
<col class="even" />
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 1</th>
<th>Head 2</th>
</tr>
<tr>
<td>1</td>
<td>a</td>
<td>1</td>
<td>a</td>
</tr>
<tr>
<td>2</td>
<td>b</td>
<td>2</td>
<td>b</td>
</tr>
<tr>
<td>3</td>
<td>c</td>
<td>3</td>
<td>c</td>
</tr>
<tr>
<td>4</td>
<td>d</td>
<td>4</td>
<td>d</td>
</tr>
</table>Notiamo che all’inizio della tabella abbiamo quattro elementi <col> che coincidono al numero di colonne. Al secondo e al quarto elemento abbiamo assegnato la classe even con cui alterneremo il colore di sfondo.
Andiamo ora a creare il codice CSS per assegnare lo stile alla tabella. Per prima cosa utilizziamo del codice classico per la tabella e le singole righe e colonne:
table {
border: 1px solid #D6DDE6;
border-collapse: collapse;
width: 80%;
}
table td {
border:2px solid #ffffff;
padding: 0.3em;
}
table th {
border:2px solid #ffffff;
background-color: #00487D;
color: #FFFFFF;
font-weight: bold;
text-align: left;
padding: 0.3em;
}A questo punto andiamo ad agire sugli elementi col per alternare il colore di background:
table col {
background-color: #80C9FF;
color: #000000;
}
table col.even {
background-color: #BFE4FF;
color: #000000;
}Con la prima regola assegniamo un colore di sfondo a tutti gli elementi col della tabella, con la seconda andiamo a modificare questo valore ai solo elementi che si trovano nella posizione pari.
Possiamo vedere il risultato finale nell'esempio.
Supporto dei browser
La tecnica che abbiamo visto nella lezione è supportata, fortunatamente, da tutti i browser incluso Internet Explorer 6. Questo ci consente quindi di utilizzarla da subito senza avere bisogno di hack aggiuntivi.