Tabelle con i CSS

In questo breve articolo vedremo come i CSS siano in grado di migliorare di molto la presentazione e la consultabilità delle tabelle attraverso poche semplici regole. Cominciamo subito.

Step 0: la tabella di base

Eccoci allo step iniziale, ovvero la tabella di partenza che si presenta senza CSS. In questa fase è bene soffermarsi sul markup di base, che invito il lettore a consultare.

<table>
<caption>Step 0</caption>
<tbody>
<tr><th>Prima riga</th><td>1.3</td><td>4.5</td><td>2.25</td></tr>
<tr><th>Seconda riga</th><td>6.6</td><td>8.8</td><td>7.9</td></tr>
<tr><th>Terza riga</th><td>0.5</td><td>4.49</td><td>3.9</td></tr>
<tr><th>Quarta riga</th><td>2.3</td><td>1.8</td><td>6.7</td></tr>
</tbody>
</table>

All'interno della table viene inserito un elemento caption che contiene la descrizione (resa sopra la tabella) e un elemento tbody, indispensabile per la validazione. All'interno del tbody vi sono elementi th (table header), e celle normali td.

Step 1: font e bordi

Nel primo passo abbiamo definito il font del body e attribuito i bordi alla tabella. Quest'ultima operazione richiede in realtà più di una dichiarazione: bisognerà specificare il valore collapse per la proprietà border-collapse e attribuire un bordo grigio chiaro di un pixel per la tabelle e le celle. Ecco le due regole:

body
{
	font:12px Arial, sans-serif
}
table,
td,
th
{
	border:1px solid #eee;
	border-collapse:collapse
}

Step 2: il padding

Nel secondo passo si è distanziato il contenuto delle celle dai suoi bordi attraverso il padding: sarà di 3 pixel in verticale e 5 pixel in orizzontale:

td,
th
{
	padding:3px 5px
}

Step 3: allineamento

I th si presentano di default in grassetto e centrati, mentre i td sono, in assenza di CSS, allineati a sinistra. Per migliorare l'allineamento del testo, nello step 3 si sono allineati a sinistra i th e a destra i td. Ecco le due regole:

td
{
	text-align: right
}
th
{
	text-align: left
}

Step 4: righe alterne e titolo

Nel quarto e ultimo step si sono aggiunte le righe alterne, utilissime per la leggibilità soprattutto in tabelle molto corpose. Da notare che nell'HTML si è assegnata una class="odd" a un riga (tr) sì e una no. Si specificheranno quindi i colori di sfondo per i td e th appartenti alle righe con classe "odd":

tr.odd td,
tr.odd th
{
	background-color:#D5E4FF
}

Con i CSS3 questo effetto si può anche ottenere grazie all'uso della pseudo-classe :nth-child, senza la necessità di generare classi apposite. Così:

tr:nth-child(2n+1) {background-color:#D5E4FF;}

o così:

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

Si è infine personalizzato il font del titolo (caption) della tabella, rendendolo
in grigio e grassetto:

caption
{
	font-weight:bold;
	color: #999
}

L'esempio è così ultimato, e direi che rispetto alla versione di partenza la presentazione agevola molto la consultazione. Rivediamo per riepilogo tutte le regole CSS utilizzate:

table,
td,
th
{
	border:1px solid #eee;
	border-collapse:collapse
	padding:3px 5px
}
td
{
	text-align:right
}
th
{
	text-align:left
}
tr.odd td,
tr.odd th
{
	background-color:#D5E4FF;
}
caption
{
	font-weight:bold;
	color:#999
}

Conclusioni

In questo articolo abbiamo visto come presentare le tabelle grazie ai CSS, attraversando buona parte delle proprietà relative. Codice ed esempi sono disponibili per il download.

Per ulteriori esempi di personalizzazione rimando all'ottima CSS Table Gallery, davvero una valida fonte di ispirazione in cui tutte le tabelle si basano sullo stesso markup. Alla prossima.