Appendice F

   Le tabelle

L'HTML e tutti i browser non vecchissimi offrono la possibilità di visualizzare tabelle. Una tabella è definita dal tag contenitore <TABLE>. All'interno della coppia di tag la tabella è definita da una serie di righe mediante il tag <TR>. Ogni riga consiste in una sequenza di celle definite dai tag <TD> e <TH> per indicare rispettivamente i dati e le intestazioni.
All'interno di una cella può essere utilizzato qualunque contenuto HTML, come paragrafi, liste, immagini, iframe ed altre tabelle. La tabella avrà forma rettangolare e con un numero di colonne pari al numero massimo di celle in ciascuna riga. Una cella può espandersi andando ad occupare anche più righe o colonne.

Ecco un esempio di tabella semplice:

Colonna 1	Colonna 2
Elemento 11	Elemento 12
Elemento 21	Elemento 22

e questo è il codice che lo genera:

<TABLE border="3">   <TR><TH>Colonna 1</TH><TH>Colonna 2</TH></TR>   <TR><TD>Elemento 11</TD><TD>Elemento 12</TD></TR>   <TR><TD>Elemento 21</TD><TD>Elemento 22</TD></TR> </TABLE>

Alcuni programmatori web non chiudono i tag degli elementi interni alla tabella. La maggior parte dei browser è elastica nei confronti di questa pratica e consentono correttamente la visualizzazione della tabella, ma questo comportamento sarebbe da evitare perché può spesso indurre in errore.
Salvo diverse impostazioni le intestazioni appaiono in grassetto mentre i dati appaiono in testo normale.

Una cella può espandersi su più colonne mediante l'attributo COLSPAN associato ai tag <TH> e <TD>. Il valore di questo attributo è il numero di colonne che verranno occupate.

Eccone un esempio:

Rettangolo		Cerchio
x	y	Centro		Raggio
125	79	100	80	15
144	53	112	100	20

e questo è il codice che lo genera:

<TABLE border="3">   <TR><TH colspan="2">Rettangolo</TH><TH colspan="3"><CENTER>Cerchio</CENTER></TH></TR>   <TR><TH>x</TH><TH >y</TH><TH>Centro</TH><TH >Raggio</TH></TR>   <TR><TD>125</TD><TD>79</TD><TD>100</TD><TD>80</TD><TD>15</TD></TR>   <TR><TD>144</TD><TD>53</TD><TD>112</TD><TD>100</TD><TD>20</TD></TR> </TABLE>

Una cella può espandersi anche su più righe, mediante l'attributo ROWSPAN associato ai tag <TH> e <TD>. Il valore di questo attributo è il numero di righe che verranno occupate. È importante, mentre si compilano le celle delle righe successive, ricordarsi delle caselle già occupate dalle righe superiori, che nelle nuove righe non esisteranno.

Eccone un esempio:

Gruppo	Nazionalità	Numero
Studenti	Italiani	234
	Francesi	13
	Spagnoli	27
Personale	Italiani	14
	Spagnoli	7

e questo è il codice che lo genera:

<TABLE border="3">   <TR><TH>Gruppo</TH><TH>Nazionalità</TH><TH>Numero</TH></TR>   <TR><TD ROWSPAN="3">Studenti</TD><TD>Italiani</TD><TD>234</TD></TR>   <TR><TD>Francesi</TD><TD>13</TD></TR>   <TR><TD>Spagnoli</TD><TD>27</TD></TR>   <TR><TD ROWSPAN="2">Personale</TD><TD>Italiani</TD><TD>14</TD></TR>   <TR><TD>Spagnoli</TD><TD>7</TD></TR> </TABLE>

Con un po' di fantasia e un minimo di attenzione è possibile combinare espansioni per righe e per colonne, ottenendo effetti grafici di maggiore effetto.


Il calcolo della larghezza di una tabella è un conteggio piuttosto complesso da parte del browser che esamina la larghezza delle diverse colonne. Lo standard HTML permette di specificare la larghezza delle colonne, ma non tutti i browser reagiscono allo stesso modo.
La larghezza complessiva della tabella può essere impostata utilizzando l'attributo WIDTH del tag <TABLE>. Il valore inserito specifica la larghezza in pixel o in percentuale della finestra del browser.
La larghezza di una colonna è determinata dalla cella di dimensioni maggiori, la cui larghezza può essere influenzata dal contenuto della cella stessa, soprattutto se questo contenuto è una immagine o un'altra tabella. La larghezza di una cella può essere espresso esplicitamente mediante l'attributo WIDTH del tag <TD>.
Ecco qualche semplice esempio:

Regione	Capoluogo
Lazio	Roma
Piemonte	Torino
Toscana	Firenze
Campania	Napoli

e questo è il codice che lo genera:

<TABLE border="3" width="50%">   <TR><TH width="50%">Regione</TH><TH width="50%">Capoluogo</TH></TR>   <TR><TD>Lazio</TD><TD>Roma</TD></TR>   <TR><TD>Piemonte</TD><TD>Torino</TD></TR>   <TR><TD>Toscana</TD><TD>Firenze</TD></TR>   <TR><TD>Campania</TD><TD>Napoli</TD></TR> </TABLE>

La dimensione delle colonne al 50% ciascuna è impostata nella prima riga, nel tag <TH>, le righe successive ne ereditano la larghezza, adeguandosi.
Possiamo notare che allargando e restringendo la finestra del browser, la tabella continua ad occupare metà della larghezza.

Regione	Capoluogo
Lazio	Roma
Piemonte	Torino
Toscana	Firenze
Campania	Napoli

e questo è il codice che lo genera:

<TABLE border="3" width="250">   <TR><TH width="40%">Regione</TH><TH width="60%">Capoluogo</TH></TR>   <TR><TD>Lazio</TD><TD>Roma</TD></TR>   <TR><TD>Piemonte</TD><TD>Torino</TD></TR>   <TR><TD>Toscana</TD><TD>Firenze</TD></TR>   <TR><TD>Campania</TD><TD>Napoli</TD></TR> </TABLE>

Abbiamo fissato la larghezza della tabella a 250 punti e le colonne al 40% e 60% rispettivamente. Anche ridimensionando la finestra del browser la tabella rimane delle stesse dimensioni.


Può capitare che una tabella venga costruita a partire da un file di dati e qualche cella può non contenere alcun dato. Lo standard HTML visualizza la cella con una superficie rialzata e senza bordi piuttosto che come una casella vuota. Ciò può sembrare sgradevole alla vista, come nell'esempio che segue.

Istruzione	Funzione	Note
strcmp	confronta due stringhe
stricmp	confronta due stringhe trascurando i maiuscoli/minuscoli	Non ANSI
strcopy	copia una stringa in un'altra
strlen	fornisce la lunghezza di una stringa

Sarebbe bene mettere un trattino o un carattere simile in quelle posizioni, ma comunque è una operazione artificiosa. Lo standard HTML 3.2 suggerisce di mettere nella cella il carattere di "spazio non interrompente" codificato con &nbsp;. Ecco lo stesso esempio con il simbolo dello spazio nelle caselle vuote.

Istruzione	Funzione	Note
strcmp	confronta due stringhe
stricmp	confronta due stringhe trascurando i maiuscoli/minuscoli	Non ANSI
strcopy	copia una stringa in un'altra
strlen	fornisce la lunghezza di una stringa

Il tag <TR> ha diversi attributi che permettono un certo controllo sulle proprietà delle righe di una tabella. Sfortunatamente non c'è modo di specificare le proprietà di una colonna di tabella; questa utile caratteristica è stata introdotta con HTML 3.0, ma non è stata accettata da nessun browser. Il controllo delle proprietà di una colonna può essere ottenuto, pazientemente, impostando le proprietà richieste separatamente a tutte le celle della determinata colonna.


Potrebbe essere necessario utilizzare un carattere diverso per il testo inserito all'interno di una tabella. Non è possibile inserire la tabella nel tag <FONT> perché questo si riferisce solo ad elementi di testo. Lo stesso discorso vale per il tag <BASEFONT>. L'unico modo per cambiare il tipo di carattere in una tabella è quello di cambiare pazientemente il carattere in ciascuna casella della tabella. In alternativa è possibile impostare il tipo di carattere da utilizzare nelle celle tramite i fogli di stile, e per questo facciamo riferimento all'apposita guida sull'argomento.


All'interno di una cella è possibile inserire quasi qualunque contenuto di tipo HTML, inclusa un'altra tabella. L'annidamento di tabelle dentro altre celle è una pratica molto sfruttata per ottenere effetti grafici avanzati e presentazioni più complesse.
L'esempio che segue mostra un banale inserimento di una tabella all'interno di un'altra.

Casella 11	Casella 12
Casella 21	Casella 2211 Casella 2212 Casella 2221 Casella 2222

Opera e Mosaic non richiedono l'uso di &nbsp; all'interno di celle vuote. Mosaic sembra avere problemi con l'attributo cellspacing="0". Tutti i browser visualizzano il testo nelle tabelle con lo stesso tipo di caratteri del testo normale. Le vecchie versioni di Netscape non sono in grado di visualizzare correttamente e tabelle annidate.


Vedi anche i tag <CAPTION>, <TABLE>, <TD>, <TH> e <TR>.