Le tabelle rappresentano uno dei più potenti strumenti a disposizione del progettista di un sito internet per realizzare un sito davvero accattivante grazie ad un maggiore controllo degli elementi presenti nella pagina.
Iniziamo subito ad affrontare il codice "dall'interno" per comprendere meglio il suo funzionamento:
<TABLE BORDER>
<TR>
<TD>1</TD><TD>2</TD><TD>3</TD>
</TR>
<TR>
<TD>4</TD><TD>5</TD><TD>6</TD>
</TR>
</TABLE>
|
Figura 1
|
Inserendo questo codice otteniamo una tabella di tre colonne per due righe con ogni cella numerata progressivamente da 1 a 6, come potete vedere nella figura 1.
Com'è facile intuire, il tag <TR> indica la riga e il tag <TD> indica la cella base.
Il parametro BORDER può essere omesso ( ed in questo caso non saranno visualizzati i bordi), oppure gli si può assegnare un valore: BORDER=5 ispessirà il bordo esterno della tabella.
Rowspan
Questo parametro permette di evitare di dover inserire celle separate per tutta la tabella come se fosse una scacchiera, aiuta cioè ad unire, fondere alcune celle in modo che una sola di queste occupi più di una riga.
<TABLE BORDER>
<TR>
<TD ROWSPAN=2>Cella doppia</TD>
<TD>1</TD><TD>2</TD><TD>3</TD>
</TR>
<TR>
<TD>4</TD><TD>5</TD><TD>6</TD>
</TR>
</TABLE>
|
Figura 2
|
Potete vedere il risultato nella figura 2; la prima colonna ha le due celle fuse in una sola.
Il valore assegnato a rowspan indica il numero di righe che deve unire.
Colspan
È l'equivalente di rowspan applicato alle colonne (row=riga, col=colonna).
<TABLE BORDER>
<TR>
<TD COLSPAN=2>Colspan</TD><TD>A</TD>
</TR>
<TR>
<TD>B</TD><TD>C</TD><TD>D</TD>
</TR>
</TABLE>
|
Figura 3
|
Le prime due celle sono fuse e uniscono le prime due colonne.
Anche a colspan va assegnato il numero di colonne da unire.
Header
L'utilizzo di colspan e rowspan diventa chiaro introducendo il tag <TH> che sostituisce <TD> nella definizione delle celle, specificando che il contenuto deve essere evidenziato perché fa parte dell'intestazione.
<TABLE BORDER>
<TR>
<TH COLSPAN=2>Riso</TH>
<TH COLSPAN=2>Fagioli</TH>
</TR>
<TR>
<TD>In</TD><TD>Out</TD>
<TD>In</TD><TD>Out</TD>
</TR>
<TR>
<TD>12 kg</TD><TD>15 Kg</TD>
<TD>11 Kg</TD><TD>18 Kg</TD>
</TR>
</TABLE>
|
| Riso |
Fagioli |
| In | Out | In | Out |
| 12 kg | 15 Kg | 11 Kg | 18 Kg |
Figura 4
|
Per utilizzare gli Headers anche lateralmente è sufficiente utilizzare <TH> invece di <TD> nella definizione della prima cella.
Quello che segue è l'esempio riportato nella figura 5 che racchiude tutti i comandi HTML descritti fino ad ora:
<TABLE BORDER>
<TR>
<TD>
<TH ROWSPAN=2></TH>
<TH COLSPAN=2>Classe</TH>
</TD>
</TR>
<TR>
<TD>
<TH>Prima</TH>
<TH>Seconda</TH>
</TD>
</TR>
<TR>
<TH ROWSPAN=2>Sesso</TH>
<TH>Maschi</TH>
<TD>12</TD>
<TD>18</TD>
</TR>
<TR>
<TH>Femmina</TH>
<TD>6</TD>
<TD>11</TD>
</TR>
</TABLE>
|
| | Classe |
| Prima | Seconda |
| Sesso | Maschi | 12 | 18 |
| Femmina | 6 | 11 |
Figura 5
|
Cellpadding e Cellspacing
Sono da utilizzare come BORDER e definiscono rispettivamente lo spazio tra il contenuto della cella e i suoi margini e lo spazio tra una cella e l'altra.
<TABLE BORDER=5 CELLPADDING=10 CELLSPACING=10>
<TR>
<TD>1</TD><TD>2</TD><TD>3</TD>
</TR>
<TR>
<TD>4</TD><TD>5</TD><TD>6</TD>
</TR>
</TABLE>
|
Figura 6
|
Align e Valign
È possibile specificare sia l'allineamento orizzontale sia quello verticale per ogni riga o per la singola cella.
Caption
È possibile legare un titolo o una didascalia alla tabella con il tag <CAPTION>.
Titolo
| Pino |
Lorenzo |
Marco |
Sostituendo ALIGN=top con ALIGN=bottom otteniamo una didascalia in basso rispetto alla tabella.
Width
Con il parametro width impostiamo la larghezza della tabella. Si inseriscono i valori in percentuale relativa allo schermo:
Utilizzando il 100% viene allargata la tabella fino al termine dello schermo.
Note finali
All'interno di una cella è possibile inserire ogni tipo di oggetto (immagini, applet, etc) nella posizione che preferiamo e il layout della pagina sarà così mantenuto su una macchina qualsiasi.
Il testo è caratterizato dai soliti tag. In pratica la tabella, al di là della funzione di semplice rappresentazione grafica di un insieme di dati, crea una griglia per visualizzare quello che ci serve sempre nello stesso modo indipendentemente dalla risoluzione video e del browser Per esempio è possibile non utilizzare la mappa ad immagini per i link inserendo nella tabella tanti "pezzi" di immagine e creando link solo per alcuni . In questo modo le aree sensibili saranno sempre quadrate ma in ogni caso un'interessante applicazione.
|
|
