Personalizzare tabelle con i CSS

Nell'articolo Tabelle con i CSS abbiamo visto
come semplici dichiarazioni possano rendere più gradevoli le nostre tabelle di dati.
In alcuni casi però consultare tabelle molto corpose si rivela un compito
piuttosto difficile. Ci sono alcune strategie per migliorare la leggibilità e la consultabilità
delle tabelle grazie ai fogli di stile: le vedremo in questo articolo. Cominciamo subito.

Differenziare il colore delle colonne

Nell'HTML esistono i poco usati elementi colgroup e col che
consentono di definire alcune proprietà di presentazione delle colonne. Vediamo il nostro
primo esempio e un suo screenshot:

Cominciamo con il markup: si tratta anzitutto di definire le colonne all'interno della tabella:
basterà inserire appena dopo l'apertura della table (e dopo un'eventuale caption)
un elemento colgroup con al suo interno i necessari elementi col. Vediamo
un estratto dell'esempio:

L'elemento col oltre ad accettare gli attributi
comuni (class, id, style, ecc..) ammette anche l' attributo span che permette
di unire due o più colonne (esempio: <col span=2>). Ovviamente,
se codificate le vostre pagine in XHTML è fondamentale chiudere i tag (esempio <col class="col1" />).

Per quanto riguarda la personalizzazione con i CSS, l'elemento col ammette
solo un insieme limitato di proprietà: queste sono border, background, width e visibility.
Si tratta di un set minimo, ma più che sufficiente per migliorare la presentazione delle tabelle.

Siamo ora pronti a procedere con il CSS dell'esempio, che oltre alle regole
comuni per le tabelle, ne include alcune specifiche per le colonne in cui viene definito lo sfondo:

Un'ottima aggiunta per migliorare la consultabilità delle colonne nell'esempio è l'utilizzo di un righello,
in grado di evidenziare la riga corrente al passaggio del mouse. Ecco l'unica regola necessaria:

Da notare che quest'ultima regola avrà effetto solo su Internet Explorer versione 7 o superiori, oltre
che su Opera, Firefox e Safari. Per quanto riguarda IE6 e versioni precedenti, la regola non verrà
interpretata in quanto questi browser non supportano la pseudo-classe :hover su elementi che
non siano link. Se ci fosse la necessità di maggiore compatibilità, l'ausilio di javascript potrebbe essere
una soluzione: rimando all'articolo Javascript e DOM sulle tabelle per approfondimenti.

Tabelle a righe e colonne alterne

Nel secondo esempio si sono usate righe e colonne alterne,
insieme a un righello. Ci sono alcune situazioni in cui l'evidenziazione di righe e colonne
può risultare utile, ma il rischio è di realizzare tabelle eccessivamente cromatiche e
difficili da consultare.

Per realizzare l'esempio è bastato attribuire la classe "odd" alternativamente sia alle righe che alle colonne,
queste le regole corrispondenti del CSS:

Da evidenziare infine come il colore sulle righe predomini su quello delle colonne: la presentazione
delle prime ha infatti una maggiore valenza sulle colonne.

Tabelle con header fisso

Eccoci quindi al terzo esempio, in cui l'intestazione (header)
è fissa, mentre il resto delle tabella ha uno scrolling confinato in altezza:

Una soluzione simile è particolarmente indicata per tabelle con molte righe, dato che lo scrolling
di pagina potrebbe portare altrimenti le intestazioni fuori dal viewport. Cominciamo con il vedere
il markup dell'esempio:

Sono necessari infatti due contenitori aggiuntivi per la tabella: il primo stabilisce
la larghezza, mentre il secondo l'altezza e lo scrolling attraverso la proprietà
overflow. Il contenitore esterno verrà reso position: relative
così da creare un contesto di posizionamento per l'header della tabella. Questo
infine verrà sistemato grazie ai posizionamenti assoluti.

Una piccola nota: è indispensabile stabilire le
dimensioni di celle th e td
per una buona resa cross-browser e la larghezza totale della tabella dovrà essere di circa
20px inferiore a quella dei due contenitori così da lasciare posto per la scrollbar.
Siamo ora pronti a vedere il CSS dell'esempio per intero:

Il nostro esempio è quasi ultimato. Discreta la compatibilità
a schermo: è stato testato con successo su IE dalla versione 5.5 alla 7, oltre che sulle ultime versioni
di Opera, Firefox e Safari. L'header non risulta fisso ed è quindi soggetto allo scrolling,
nella beta 1 di Internet Explorer 8. Ad oggi, ovviamente, non si può prevedere quale sarà
la resa dell'esempio nella versione finale del nuovo browser di casa Microsoft.

Tornando all'esempio, manca solo la parte relativa alla stampa:
si tratta in questo caso di annullare le regole a schermo relative a
dimensioni e posizionamenti. Ecco il codice:

Da evidenziare l'ultima regola, che sui browser che supportano table-header-group
come valore della proprietà display (ovvero Firefox e IE da quanto ho potuto verificare)
consente di riportare l'intestazione della tabella nelle pagine successive alla prima.

Conclusioni e download

Abbiamo visto in questo articolo due possibili modi per agevolare la consultazione delle tabelle:
si tratta di tecniche semplici ma allo stesso tempo efficaci che possono costituire una soluzione
pronta oppure un buon punto di partenza. Gli esempi visti sono disponibili per il download. Alla prossima.