In questo articolo vedremo alcuni esempi pratici di CSS e DHTML applicati alle
tabelle, intese per dati tabellari. La conoscenza di programmazione lato
client non è necessaria per l'uso pratico, mentre lo è per la comprensione approfondita
degli esempi. In particolare, saranno necessarie alcune conoscenze di Javascript
e DOM (Document Object Model).
Ottime guide sul DOM le potete trovare su:
- Lo speciale DOM di HTML.it
- Introduzione
al DOM di Brainjar.com
Inoltre, per quanto riguarda la manipolazione delle tabelle con il DOM, mi
è stato utilissimo l'ottimo tutorial Table-Sort
dello stesso Brainjar.com.
Prima di cominciare, faremo un breve ripasso sulla marcatura HTML per le tabelle,
per poi presentare esempi pratici di personalizzazione e manipolazione grazie
al Javascript e al DOM.
Non solo righe e celle
Dalla versione 4.0 di HTML sono stati forniti diversi tag per arrichire le
tabelle, e alcuni sono addirittura necessari per la validazione
del codice HTML. Eccone un elenco:
- caption
- È il titolo della tabella e ne fornisce una breve descrizione.
- thead
- Definisce un gruppo per le prime righe della tabella, usato per descrivere
le varie voci. - td
- Definisce una cella.
- th
- Definisce una cella header, il cui contenuto viene generalmente reso in grassetto.
Si può usare anche al di fuori di thead. - tr
- Definisce una riga
- tfoot
- Definisce un gruppo per le ultime righe della tabella, usato per descrivere
le varie voci. - tbody
- Definisce il corpo della tabella. Se ne può avere anche più di uno, ma almeno
uno è necessario per la validazione.
Dopo l'apertura della table, potranno
seguire nell'ordine: caption, thead,
tfoot e uno o più tbody.
Per ulteriori dettagli rimando alle Specifiche
HTML 4.0 del W3C sulle tabelle (traduzione in italiano) e alla Guida ai siti ad alta Accessibilità, che comprende numerose e approfondite
lezioni sull'argomento.
Fatta questa piccola ma doverosa premessa, possiamo senz'altro addentrarci
nella manipolazione delle tabelle grazie a Javascript.
Il DOM per accedere agli elementi di una pagina
Chi non è pratico di Javascript può senz'altro passare al prossimo paragrafo,
per poter usare gli esempi pratici di questo articolo. Ma per completezza elenco
alcune funzioni e collezioni per accedere agli elementi di pagina e tabelle che
useremo.
- document.getElementById(nomeID)
- Consente di reperire l'elemento della pagina con id nomeID.
- oggetto.getElementsByTagName(nomeTag)
- Restituisce un array con gli elementi nomeTag contenuti in un determinato
oggetto Per esempio:
document.getElementById(menu).getElementsByTagName("a")
restituisce tutti i link contenuti nell'HTML in <div
id="menu">. - oggetto.className
- Accede alla classe di un dato elemento della pagina.
- oggetto.firstChild
- Restituisce il primo elemento contenuto in oggetto. Questo potrebbe essere
anche un nodo di testo. - oggetto.firstChild.nodeValue
- Restituisce il testo contenuto in oggetto, se questo non ha elementi HTML
al suo interno. - oggettoTabella.tHead
- Restituisce l'header della tabella.
- oggettoTabella.tBodies
- Restituisce un array contenente i tbody di una data tabella.
Se il tbody è unico, come in tutti gli esempi di questo articolo, vi si può accedere
indicizzandolo. - oggettoTabella.tFoot
- Restituisce il footer della tabella.
- oggettoTabella.tBodies[0].rows
- Restituisce l'array delle righe del primo tbody di oggettoTabella.
- oggettoTabella.tBodies[0].rows[i].cells
- Restituisce l'array delle celle contenute nella riga i-esima del tbody
di oggettoTabella. Per esempio:
mytable.tBodies[0].rows[0].cells[4].firstChild.nodeValue
restituisce il contenuto della quinta cella della prima riga del primo
tbody dell'oggetto mytable.
Tabelle a righe alternate
Poco più di un mese fa su AlistApart è comparso un articolo intitolato Zebra
Tables, con un tutorial per ottenere tramite Javascript le righe alterne (ovvero
con colori alternati) su una tabella. Un modo per migliorare la leggibilità in
tabelle con molte righe e soprattutto colonne.
È possibile ottenere righe alterne anche solo mediante HTML e con i
fogli di stile: ecco come.
Come avrete visto, la parte aggiuntiva di HTML e CSS è decisamente leggera:
è sufficiente aggiungere la classe alterna
una riga sì e una no. Però, la parte di editing HTML può risultare
pesante soprattutto se la tabella è voluminosa e non si reperisce da un database
lato server con PHP o ASP. Pensate se si dovesse aggiungere il nome della classe
su una tabella di 100 righe.... Inoltre, se vogliamo togliere una riga dalla tabella,
dovremo riaggiustare l'alternanza delle righe nell'HTML.
I CSS3, con l'aggiunta di selettori atti proprio a questo scopo, consentiranno
di andare a selezionare solo i figli dispari o solo i pari di un dato elemento,
e verranno utilissimi in questo caso... ma credo che passerà parecchio tempo prima
che siano implementati su un numero sufficiente di browser.
Nel frattempo, se non si dispone di una tecnologia lato server o si è molto
pigri, si può pensare di utilizzare Javascript combinato ai CSS per alternare
le righe delle tabelle. La versione che presenterò qui è abbastanza diversa da
Zebra Tables, e consente di colorare a righe alterne tutte le tabelle presenti
in una data pagina che abbiano una classe righealterne.
Per prima cosa vediamo l'unica regola CSS necessaria:
table.righealterne tr.alterna td{background-color: #ffc}
A questo punto vediamo il codice Javascript:
onload=ColoraRighe;
function ColoraRighe(){
var tabelle=document.getElementsByTagName("table");
for(i=0;i<tabelle.length;i++){
if(tabelle[i].className.indexOf("righealterne")>=0){
trs=tabelle[i].tBodies[0].rows;
for(j=1;j<trs.length;j+=2)
trs[j].className="alterna";
}
}
}
Lo script, al caricamento della pagina, ricerca tutte le tabelle attraverso
la funzione getElementsByTagName e le
scorre tutte attraverso un semplice ciclo for.
Per ciascuna tabella verifica se la classe contiene la parola righealterne
e in caso positivo procede ad assegnare la classe alterna
su una riga sì e una no di tale tabella.
In questo caso, la separazione tra codice HTML e funzionalità è netta, a tal
punto che è possibile inserire lo script in un file esterno alla pagina HTML.
L'unico punto d'unione necessario tra HTML, CSS e Javascript è la classe righealterne.
Non ci resta che vedere un esempio
in cui la prima e la terza tabella hanno le righe alterne.
Tabelle a colonne alterne
Per ottenere una tabella a colonne alterne solo con HTML e CSS il discorso
è ancora più complicato rispetto alla versione per righe: in tal caso, infatti,
andrebbe assegnata una classe ad una cella sì e una no, un lavoro di editing
non indifferente. E, seppur si disponga di una tecnologia lato server, c'è da
considerare il fatto che il peso di una pagina, soprattutto per tabelle corpose,
può aumentare significativamente dovendo assegnare una classe ad una cella su
due. Anche in questo caso Javascript può esserci d'aiuto. L'unica dichiarazione
CSS che ci serve è la seguente:
table.colonnealterne td.alterna{background-color: #ffc}
Vediamo il codice Javascript:
onload=ColoraColonne;
function ColoraColonne(){
var tabelle=document.getElementsByTagName("table");
for(i=0;i<tabelle.length;i++){
if(tabelle[i].className.indexOf("colonnealterne")>=0){
trs=tabelle[i].tBodies[0].rows;
for(j=0;j<trs.length;j++){
tds=trs[j].cells;
for(k=0;k<tds.length;k+=2)
tds[k].className="alterna";
}
}
}
}
Il codice ricerca tra le tabelle della pagina quelle con classe colonnealterne
e riga per riga colora una cella sì e una no. Necessita quindi di un ciclo
in più rispetto all'analogo per le righe. Anche in questo caso vediamo il
risultato.
L'esempio finale
Ho preparato un file Javascript esterno che include le due funzioni ColoraRighe
e ColoraColonne per applicarlo a una
pagina HTML: ecco il risultato. Il codice Javascript,
l'HTML e il CSS della pagina sono disponibili per il download. Vi ricordo che
per includere lo script nelle vostre pagine vi basterà aggiungere la seguente
riga nella sezione head:
<script type="text/javascript" src="tabelle.js"></script>
Mentre per il CSS il codice da aggiungere, sempre nell'head, è:
<style type="text/css">
@import url('tabelle.css');
</style>
Conclusioni
Termina qui la prima parte dell'articolo. Abbiamo visto come sia possibile
personalizzare la presentazione delle tabelle attraverso DOM e CSS risparmiando
decisamente sulla codifica HTML. Due parole sulla compatibilità: gli esempi sono
stati testati su Internet Explorer 6, Opera7.23 e Mozilla 1.5. In via teorica,
il supporto dello script dovrebbe essere esteso a tutti i browser moderni e DOM-compatibili.
Nel prossimo articolo invece vedremo come con il Javascript si possano aggiungere
caratteristiche funzionali sulle tabelle. Alla prossima.
