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:
col.col1{background: #C4E3F7}
col.col2{background: #A4DBFF}
col.col3{background: #86B3D0}
col.col4{background: #679FC5}

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:
tr:hover td{background: #FFF}

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:
tr.odd td{background: #ddd}
col.odd{background: #eee}
tr:hover td{background: #B1B6DE}

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:
Figura 2 - Tabella con header fisso

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:
<div class="tablewrap">
<div class="tablewrap-inner">
<!-- qui la tabella -->
</div>
</div>


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:
/* stili generici */
table,td,th{border:solid #CCC;border-width: 1px 0;border-collapse: collapse}
td,th{padding: 5px 0;text-align: left;width:100px}
th{background: #DAE6F4;color: #000}
tr.odd td{background: #eee}

/* regole per l'header fisso */
div.tablewrap{position: relative;width: 420px;padding-top: 20px}
div.tablewrap-inner{width: 420px;height: 230px; overflow: auto}
div.tablewrap thead tr{position: absolute;top: -3px}

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:
div.tablewrap,div.tablewrap-inner,td,th{
width: auto;overflow: visible;height: auto}
div.tablewrap thead tr{position: static}
thead{display: table-header-group}

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.



Fonte