TANTE OPZIONI PER LE TABELLE

Tutorial interattivo

La richiesta della lettrice è quanto mai opportuna, perché in effetti la nostra guida, nata come "guida minima", non aveva trattato tutte le proprietà delle tabelle.
Rimediamo subito!
Alcune volte serve inserire in una pagina tabelle abbastanza complesse: magari occorre differenziare i colori delle varie colonne o delle righe, inserire intestazioni, commenti finali o quant'altro, non visualizzare tutti i bordi ma solo, ad esempio, quelli verticali; i dati infine possono essere così numerosi da richiedere troppo tempo per essere caricati. Se l'utente non vede comparire nulla, facilmente si disconnette: ecco allora che nasce la necessità di far caricare almeno alcune sezioni della tabella, in attesa che anche tutti gli altri dati risultino visibili.
Cominciamo dunque ad analizzare le varie alternative passo per passo.

Inserire intestazioni per tutte le colonne

Dopo il normale tag <TR>, al posto dei tags <TD> inserire i tags <TH>, uno per ogni colonna: i caratteri verranno automaticamente scritti in grassetto e centrati. Comodo, no?

Raggruppare le righe di una tabella in: Intestazioni,
 uno o più "corpi", piede

Queste opzioni permettono di strutturare meglio le tabelle, soprattutto se contengono molti dati. Se una tabella contiene molti dati, il browser aspetta che sia caricata per intero, prima di visualizzarla. Se invece all'inizio si dichiarano intestazioni e piede, queste vengono visualizzate immediatamente: in questo modo l'utente non abbandona la pagina credendo che sia vuota. Se una tabella occupa più fogli, inoltre, l'intestazione ed il piede possono essere stampati in ogni foglio. Ecco il codice:

1. Dichiarare la tabella:

   <table>

2. Dichiarare l'intestazione:

   <thead>
   <tr><td>....<td>...<td>...
   </thead>

   Inserire il numero di colonne desiderate, con i rispettivi dati.
3. dichiarare il piede:

   <tfoot> <tr><td>....<td>...<td>...
   </tfoot>

4. Inserire uno o più "corpi":

   <tbody align="center" style="font-family:verdana; color:red">
   <tr><td>....<td>...<td>...
   <tr><td>....<td>...<td>...
   ...
   </tbody>
   <tbody align="right" style="font-family:arial; color:green"; background-color:blue>
   <tr><td>....<td>...<td>...
   <tr><td>....<td>...<td>...
   ...
   ...
   </tbody>

   Chiaramente ogni corpo può contenere un numero diverso di righe (almeno una); le colonne invece devono essere dello stesso numero per tutte le sezioni orizzontali (testa, corpo, piede).
   Nel codice è evidenziato come in ogni TBODY si possano specificare allineamenti, colore del carattere o dello sfondo e tipo di font una volta per tutte, senza la seccatura di dover ripetere queste opzioni per ogni colonna. Inoltre, con l'uso di <rules> ogni corpo può avere la sua cornice.
5. Chiudere la tabella:

   </table>

Creare delle sezioni verticali in una tabella

I gruppi di colonne permettono di creare suddivisioni verticali in modo semplice e veloce. Basta dichiarare, ad esempio, <colgroup span=3 bgcolor=blue> <colgroup span=2 bgcolor= green><colgroup span=1 bgcolor=red> per ottenere un gruppo di tre colonne blu, un gruppo di due colonne verdi, una colonna rossa.
L'autore può quindi dichiarare i colgroups all'inizio per gestire velocemente lo sfondo, anche se poi deve comunque crearsi righe e colonne indipendentemente dai colgroups. Inoltre, attraverso i gruppi di colonne, può essere gestito anche l'allineamento, sia verticale che orizzontale, dei caratteri. Usando poi opportunamente l'opzione rules, ogni gruppo di colonne può avere una sua cornice, per una migliore visualizzazione.

Visualizzare solo alcuni bordi

All'interno del tag <TABLE>, dopo aver deciso lo spessore del bordo (che determina la larghezza della cornice intorno alla tabella), ad esempio border=2, inserire la parola riservata rules seguita da una delle seguenti opzioni:

• =none nessun bordo interno visualizzato, ma solo la cornice
• =groups visualizzati i bordi intorno alle intestazioni, ai gruppi di colonne o di righe, al piede
• =rows solo i bordi orizzontali visualizzati
• =cols solo i bordi verticali visualizzati
• =basic visualizza i bordi di tutte le celle
• =all visualizza i bordi di tutte le celle, come basic

Gestire la cornice esterna

All'interno del tag <TABLE>, dopo aver deciso lo spessore del bordo, ad esempio border=2, inserire la parola riservata frame seguita da una delle seguenti opzioni:

• =void la tabella appare senza cornice
• =above solo la parte superiore della cornice visualizzata
• =below solo la parte inferiore della cornice visualizzata
• =hsides solo le parti superiore ed inferiore della cornice visualizzate
• =lhs solo la parte sinistra della cornice visualizzata
• =rhs solo la parte destra della cornice visualizzata
• =vsides solo le parti sinistra e destra della cornice visualizzate
• =box tutta la cornice visualizzata
• =border come box