CSS  »  Articoli  »  Effetti con 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.

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:

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:

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:

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":

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

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:

Conclusioni

In questo articolo abbiamo visto come sia possibile 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.

Altri articoli

Altre guide

Altre newsletter