Le Tabelle Non servono soltanto per incolonnare e tabulare i dati come si potrebbe facilmente pensare. Le tabelle se sapientemente sfruttate permettono una precisa impaginazione di tutti gli elementi che compongono la pagina web, siano questi semplici testi, immagini o qualsiasi altra cosa. Un esempio è questa mia guida che è impaginata proprio con l'uso delle tabelle.

Ci sono elementi ed attributi ad uso esclusivo dei soli browser IE, alcuni li ho volutamente trascurati oltre che per la loro esclusiva anche perchè personalmente li ritengo inutili.

Chi sono per poter giudicare cosa serve e cosa non serve?
Nessuno, non sono nessuno... ma se pensate che potevano esservi utili potete sempre ricredervi più avanti :-)  

<TABLE>...</TABLE>

Una tabella inizierà sempre con questo elemento: <TABLE> e finirà con </TABLE> delimitatore della tabella stessa. Questo elemento da solo non dice nulla, necessita di una definizione di celle e colonne che vedremo più avanti. Sono molti gli attributi che si possono assegnare a table:

Si inseriscono lasciando uno spazio vuoto fra la scritta table e la sua chiusura  >  gli attributi possono essere più di uno e specificati uno di seguito all'altro.

ALIGN

Consente di specificarne l'allineamento della tabella rispetto al documento, con le seguenti possibilità: Center, Left e Right rispettivamente per centrato, a sinistra, a destra.

E' possibile applicarlo oltre che all'elemento <TABLE> anche agli elementi che costituiscono la struttura della tabella stessa quali: <TD> e <TH> descritti più avanti.

BACKGROUND

Permette di avere un'immagine come sfondo della tabella, è possibile applicarlo oltre che all'elemento <TABLE> anche agli elementi che costituiscono la struttura della tabella stessa quali: <TD> e <TH> descritti più avanti.
Si possono utilizzare come immagini di sfondo i vari tipi di file grafici consentiti dal web: gif, jpg, png.

Attributo proprietario di alcuni browser non riconosciuto dal W3C ma approvato se inserito in un CSS

BGCOLOR

Permette di avere un colore in tinta unita come sfondo della tabella, è possibile applicarlo oltre che all'elemento <TABLE> anche agli elementi che costituiscono la struttura della tabella stessa quali: <TD> e <TH> descritti più avanti.
Il colore può essere espresso col suo nome in lingua inglese o con la solita tripletta di numeri esadecimali. A questo proposito su questa pagina è possibile vedere 140 colori di base. E' possibile applicarlo oltre che all'elemento <TABLE> anche agli elementi che costituiscono la struttura della tabella stessa quali: <TD> e <TH> descritti più avanti.

BORDER

Permette di avere un bordo perimetrale che contorna tutte le celle facenti parte della tabella; è possibile impostarne anche lo spessore. Alcuni browser in mancanza di questo attributo lasciano un piccolo spazio pur non facendo vedere alcun bordo, per recuperare quello spazio è necessario impostare il border a zero.

BORDERCOLOR

Permette di selezionare il colore del bordo, questo attributo supportato solo da IE per funzionare deve necessariamente avere impostato anche l'attributo border, il colore può essere espresso col suo nome in lingua inglese o con la solita tripletta di numeri esadecimali. A questo proposito su questa pagina è possibile vedere 140 colori di base.

Attributo proprietario di alcuni browser non riconosciuto dal W3C ma approvato se inserito in un CSS.

BORDERCOLORDARK

Permette di selezionare il colore più scuro su un bordo (l'opposto di BORDERCOLORLIGHT); creando un effetto di luce. Questo attributo supportato soltanto da IE per funzionare deve necessariamente avere impostato anche l'attributo border. Meglio fare uso dei CSS con i quali è possibile ottenere un effetto simile ma visto da tutti i tipi di browser.

BORDERCOLORLIGHT

Permette di selezionare il colore più chiaro su un bordo (l'opposto di BORDERCOLORDARK); creando un effetto di luce. Questo attributo supportato soltanto da IE per funzionare deve necessariamente avere impostato anche l'attributo border. Meglio fare uso dei CSS con i quali è possibile ottenere un effetto simile ma visto da tutti i tipi di browser.

CELLPADDING

Specifica la quantità di spazio vuoto lasciato tra i bordi delle celle di una tabella e il dato vero e proprio in esse contenuto, il valore per default è 2 , quindi per tabelle più compresse si dovrà impostare cellpadding uguale a zero.

CELLSPACING

Specifica la quantità di spazio vuoto da lasciare tra le singole celle di dati di una tabella, il valore per default è 2, per tabelle più compresse si dovrà impostare cellspacing uguale a zero .

FRAME

Permette di scegliere quale tipo di visualizzazione assegnare al bordo. Questo attributo per funzionare deve avere impostato l'attributo border. I valori possibili sono:

void = rimuove tutti i bordi esterni
above = visualizza solo i bordi esterni in cima alla tabella
below = visualizza solo i bordi esterni in fondo alla tabella
hsides = visualizza solo i bordi orizzontali in cima e in fondo alla tabella
lhs = visualizza i bordi esterni solo al margine sinistro della tabella
rhs = visualizza i bordi esterni solo al margine destro della tabella
vsides = visualizza i bordi esterni ai due margini destro e sinistro della tabella
box = visualizza un riquadro attorno alla tabella (tutti i margini)
border = visualizza un riquadro attorno alla tabella (come box)

HEIGHT

Permette di specificare l'altezza della tabella, può essere in pixel o in percentuale dell'altezza della finestra del browser che la visualizza. Questo attributo è supportato soltanto dai browser IE e non riconosciuto dal W3C. Diventa un attributo valido se applicato ai singoli elementi che costituiscono la struttura della tabella stessa quali: <TD> e <TH>.

SUMMARY

A differenza di caption serve per una descrizione più lunga e dettagliata a beneficio soprattutto di quei browser non grafici che fanno uso di programmi vocali o con sistema Braille.

WIDTH

Permette di specificare la larghezza della tabella, che può essere in pixel o in percentuale della larghezza della finestra del browser che la visualizza. E' possibile applicarlo oltre che all'elemento <TABLE> anche agli elementi che costituiscono la struttura della tabella stessa quali: <TD> e <TH> descritti più avanti.

Provate a variare le dimensioni della vostra finestra del browser, quella in cui state vedendo questa pagina, noterete che anche la larghezza della tabella espressa in percentuale varia mantenendo il 25% di visualizzazione specificato.

<CAPTION>...</CAPTION>

L'elemento <caption> rappresenta la didascalia della tabella, deve trovarsi all'interno della tabella subito dopo table e non all'interno di righe (tr) o di celle (td).

align di caption

L'attributo ALIGN imposta la posizione della didascalia rispetto alla tabella. Gli attributi possibili sono TOP, BOTTOM, LEFT e RIGHT. rispettivamente per:

VALIGN

Permette di specificare l'allineamento verticale del testo visualizzato all'interno delle celle di una tabella, i valori attribuibili sono: middle, top, baseline, bottom.

ALIGN

Permette di specificare l'allineamento orizzontale del testo visualizzato all'interno delle celle di una tabella, i valori attribuibili sono: left, right, center,char e justify

HEIGHT

Permette di specificare l'altezza della cella, può essere espresso in pixel o in percentuale dell'altezza della tabella. Più celle affiancate avranno tutte l'altezza max specificata in una delle celle della stessa riga.

WIDTH

Permette di specificare la larghezza della cella, che può essere espresso in pixel o in percentuale della larghezza della tabella. Più celle incolonnate avranno tutte la larghezza max specificata in una delle celle della stessa colonna.

<TR>...</TR>

Questo tag inserito all'interno di table definisce l'inizio di una riga della tabella, significa che il numero di righe di una tabella è pari al numero di elementi TR in essa contenuti. Supporta molti degli attributi di TABLE e di TD. A differenza di TD non contiene dati al suo interno in quanto serve solo per creare la struttura, non hanno quindi ragione di esistere attributi quali BGCOLOR o BACKGROUND che se occorrono potranno essere definiti nel tag TD inserito all'interno di TR stesso.

<TH>...</TH>

Questo tag inserito all'interno di table e di tr definisce la cella intestazione della tabella. Praticamente il testo all'interno di questo tag sarà in neretto, supporta tutti gli attributi di TABLE e di TD. Attenzione all'attributo NOWRAP, se presente impedisce il ritorno a capo del contenuto della cella forzando questa a mantenere le dimensioni necessarie per contenere tutto il testo su una sola riga. Necessita di essere racchiuso fra i tags <TR> e </TR> esattamente cone TD

Questo il risultato

<TD>...</TD>

Questa coppia di tags inseriti all'interno di table e di tr definiscono la cella vera e propria della tabella, TD supporta tutti gli attributi di TABLE; quindi non soltanto i vari allineamenti ma è possibile avere anche colori e/o immagini di sfondo e volendo tutti diverse fra le singole celle. Attenzione però, a differenza di table è possibile adoperare anche l'attributo NOWRAP, che se presente impedisce il ritorno a capo del contenuto della cella, forzando questa a mantenere le dimensioni necessarie per contenere tutto il testo su una sola riga. Questo tag è di norma preceduto dal tag <tr> che definisce l'inizio della riga. All'interno di una stessa tabella si dovranno definire lo stesso identico numero di celle, a meno che non si faccia uso dell'attributo COLSPAN che sarà visto più avanti.

E così via... Il tutto rigorosamente all'interno dei tags <table> e </table> e di <tr> e </tr>. Ho reso visibile il bordo per permettere di capirne meglio il funzionamento, molto spesso invece il bordo è impostato a zero in modo da usare la tabella solo come struttura portante dei dati. Oggi con XHTML e l'uso dei box non sarebbe forse più necessario ma vi assicuro che è e resta comunque una buona tecnica di impaginazione.

Le tabelle si possono nidificare, cioè è possibile mettere delle tabelle all'interno di celle di altre tabelle creando così strutture più complesse che si adattano perfettamente a qualsiasi tipo di impaginazione voluta.
Potrebbero persino contenere parti di immagini che si ricompongono cella per cella come se si trattasse di un puzzle. Anzi, per immagini di grosse dimensioni vengono ancora oggi adoperate a questo scopo per non creare lunghe attese di caricamento.

RULES

Serve per la visualizzazione dei bordi fra le celle interne quando si fa uso dei tags <THEAD> <TBODY> e <TFOOT>, per funzionare deve essere necessariamente impostato anche l'attributo border. I valori possibili sono:

none = rimuove tutti i bordi esterni
groups = visualizza bordi orizzontali fra le sessioni <THEAD><TBODY><TFOOT>
rows = visualizza bordi orizzontali tra ciascuna riga
cols = visualizza bordi orizzontali tra cisacuna colonna
all = visualizza tutti i bordi interni

<THEAD>...</THEAD>

Questo elemento è utilizzato per specificare la sezione di intestazione della tabella. E' simile all'elemento HEAD di html. Si adopera con TBODY e va dichiarato prima di tbody stesso. Utile per tabelle lunghe dove anche in fase di stampa su ogni pagina sarebbe ripetuta l'intestazione. Per evidenziare l'intestazione è possibile fare uso di TH

Ricordatevi che facendo uso di <thead> o di <tfoot> sarà necessario usare anche <tbody>.
Questo il risultato :

La scritta in grassetto è una caratteristica dell'elemento <th> (senza il colore giallo chiaro inserito appositamente per meglio evidenziare l'intestazione).

<TBODY>...</TBODY>

Questo elemento serve per specificare la sezione del corpo della tabella, è analogo all'elemento <BODY> di html ed influenza direttamente la visualizzazione della tabella stessa. Si adopera in presenza di THEAD o TFOOT descritti sopra e sotto.

<TFOOT>...</TFOOT>

Questo elemento è utilizzato per specificare l'intestazione della tabella ma posizionata nel piede (fondo pagina) della tabella stessa. Si adopera con TBODY e va dichiarato prima di tbody stesso. Utile per tabelle lunghe dove anche in fase di stampa su ogni pagina sarebbe ripetuta l'intestazione a fondo tabella. Per evidenziare l'intestazione è possibile fare uso di TH

Lo stesso esempio usato per thead ma inserendo <tfoot> al posto di <thead>:

Si avrà questo il risultato :

La scritta in grassetto è una caratteristica dell'elemento <th> (senza il colore giallo chiaro inserito appositamente per meglio evidenziare l'intestazione).

ROWSPAN e COLSPAN

Come già accennato le tabelle, salvo casi particolari, hanno un numero di celle uguale per ogni riga se per esempio su una riga abbiamo tre celle si dovranno avere tre celle per ogni altra riga precedente e seguente.

Fortunatamente però è possibile intervenire sulla struttura facendo in modo che una cella sia più larga o più lunga delle altre in modo da occupare lo spazio delle celle che mancano o che vengono tolte. in parole povere avremo sempre una forma rettangolare o quadrata della struttura ma al suo interno le celle potranno essere accomodate. Se così non fosse sarebbero piuttosto rigide nel loro utilizzo e sicuramente poco utilizzabili dal lato pratico.

Gli attributi COLSPAN e ROWSPAN servono proprio a spezzare queste regole e dare la possibilità di modificarle a proprio piacimento, si tratta di avere le idee chiare su come dovrà essere fatta questa tabella, prima di passare alla sua realizzazione. Vediamo alcuni esempi che chiariranno certamente meglio il concetto.

Questo sotto il risultato

Risulta intuitivo che se servisse una tabella con 16 celle si potrebbe disporla su 4 righe con 4 celle, oppure due righe con 8 celle, o anche 8 righe con 2 celle. E perchè no 16 righe da una sola cella.

Quando però la tabella non è più regolare, per esempio nel caso servano 7 celle e dove magari la prima di dimensioni maggiori, per mettere al suo interno un'intestazione o altro... come fare?
ROWSPAM e COLSPAN servono proprio a questo, a modificare il numero di righe e colonne mantenendone la struttura regolare a forma di quadrato o di rettangolo, vediamo un esempio.

La tabella regolare prevede due <tr> ed otto <td>, praticamente quattro celle (colonne) per ogni riga.

questo il risultato:

Adesso al primo td, quello della cella 1 riga uno, applichiamo l'attributo ROWSPAN seguito dal numero 2, così facendo la tabella espanderà la colonna cella 1 di due righe (row) in modo che prenda 2 posti, quindi si fonderà con la cella sottostante che di fatto noi non avremo dichiarato nella seconda riga per lasciare il posto alla cella sopra espansa con rowspan.

Questo il listato ed anche l'esempio pratico:

Vediamo adesso lo stesso esempio ma facendo in modo che la prima cella si espanda in orizzontale, quindi non più rowspan (righe) ma colspan (colonne). Sarà impostata in modo che che dovrà essere di dimensioni pari a 4 celle. Tornando al primo td, quello della cella 1 riga 1, e richiamando l'attributo COLSPAN seguito dal numero 4; la tabella espanderà la riga cella 1 in modo da prendere altri 3 posti, quindi occuperà il posto delle celle laterali che non andranno inserite.

Questo il listato ed anche l'esempio pratico:

avrei potuto fare anche così:

Dicevo all'inizio di questa sezione che le tabelle possono essere nidificate fra di loro, non ci sono limiti se non quello della propria fantasia e del buon senso. Magari evitate di complicarvi troppo la vita se non ce ne fosse realmente il bisogno. Ecco un altro esempio pratico:

La tabella 2 formata da 4 celle di colore ocra si trova dentro ad una cella della tabella 1 espansa con rowspan 2

  Potete fare domande e discutere l'argomento sul Forum