HTML
(HYPERTEXT MARKUP LANGUAGE)
Lezione N.8
LE
TABELLE
L'utilizzo
delle tabelle in HTML è molto importante perché
consente agli autori di ottenere risultati non implementati
direttamente nel linguaggio. Un esempio tipico è dato
dalla suddivisione del testo in più colonne. All'interno
delle tabelle possono risiedere altre tabelle e tutti i tag
con relativi attributi che si trovano solitamente all'interno
di <BODY></BODY>. Se ben utilizzate le tabelle
sono degli strumenti assai utili ed efficaci.
La
struttura di base delle tabelle è la seguente:
<TABLE
attributi>
<CAPTION
attributo>didascalia</CAPTION>
<TR
attributi>
<TH>titolo
tabella </TH>
<TD>contenuto
cella n</TD>
</TR>
</TABLE>
Per rendere più semplice la comprensione di ciò
che sarà visto in questo capitolo è utile fare
riferimento alla tabella dimostrativa sottostante. La fig.1
mostra il classico esempio di tabella utilizzata per svariati
scopi. E' in ogni modo utile pensare al contenuto d'ogni singola
cella come al contenuto tra i tag:
<BODY></BODY>
Si ricorda che è buona abitudine anche dove non è
obbligatorio utilizzare i tag di chiusura per facilitare la
comprensione del codice prodotto.
| fig.1
esempio di tabella (questa è la didascalia) |
| Titolo
tab. 1 |
Titolo
tab. 2 |
Titolo
tab. 3 |
Titolo
tab. 4 |
| Cella
1-1 |
Cella
2-1 |
Cella
3-1 |
Cella
4-1 |
| Cella
1-2 |
Cella
2-2 |
Cella
2-3 |
Cella
2-4 |
| Cella
1-3 |
Cella
2-3 |
Cella
3-3 |
Cella
4-3 |
<TABLE></TABLE>
Il
tag <TABLE> delimita l'inizio e la fine della tabella.
Il tag <TABLE> possiede molti attributi tra i quali:
"align", "width", "border",
"cellspacing", "cellpadding".
La
sintassi è:
<TABLE
attributi>
contenuto
tabella
</TABLE>
"align"
definisce la posizione della tabella, I valori possono essere:
left, center, right.
Il valore center è poco usato perché non supportato
dai principali browser
"width" definisce la larghezza della tabella e può
essere espresso in pixel o in percentuale.
"border" definisce l'ampiezza del bordo esterno
in pixel.
"cellspacing" definisce lo spazio tra le celle in
pixel.
"cellpadding" definisce lo spazio tra il bordo interno
della cella ed il testo, in pixel.
<CAPTION></CAPTION>
Il
tag <CAPTION> serve ad aggiungere una didascalia alla
tabella.
L'unico attributo di questo tag è "align".
La
sintassi è:
<CAPTION
align="top bottom"> didascalia </CAPTION>
"align"
definisce in questo caso la posizione rispetto alla tabella
sopra-top, sotto-bottom.
Non è possibile definire la posizione orizzontale che
è sempre centrata.
<TR></TR>
Il
tag <TR> delimita l'inizio e la fine di una riga della
tabella.Non richiede obbligatoriamente </TR>
Il tag <TR> possiede due principali che sono:
"align", "valign"
La
sintassi è:
<TR
align" left center right" valign" top middle
bottom">
"align" definisce la posizione del testo in linea
orizzontale, relativo alla riga racchiusa tra <TR></TR>,
i valori possono essere: left, center, right.
"valign" definisce la posizione del testo in linea
verticale, relativo alla riga racchiusa tra <TR></TR>,
i valori possono essere: top (in alto), middle (in centro),
bottom (in basso).
I valori di default sono "left" e "middle".
I valori impostati da "align" e "valign"
nel tag <TR> non hanno priorità sui valori delle
singole celle.
<TH></TH>
Il
tag <TH> delimita il contenuto di una cella di titolo.
Tale cella può trovarsi ovunque all'interno della tabella
e possiede gli stessi attributi del tag <TD>.
La
sintassi è:
<TH
attributi> titolo <TH>
<TD></TD>
Il
tag <TD> delimita il contenuto di una cella di titolo.
Tale cella può trovarsi ovunque all'interno della tabella
e può utilizzare tutti i tag e gli attributi appartenenti
al tag <BODY>
Al suo interno si possono trovare immagini, altre tabelle,
testo, applet.
Gli attributi specifici del tag <TD> sono: "align",
"valign", "nowrap", width", "height",
"rowspan"colspan"
La sintassi è:
<TD
attributi> contenuto <TD>
"align"
definisce la posizione del testo in linea orizzontale, relativo
alla cella racchiusa tra <TD></TD>, i valori possono
essere: left, center, right.
"valign" definisce la posizione del testo in linea
verticale, relativo alla cella racchiusa tra <TD></TD>,
i valori possono essere: top (in alto), middle (in centro),
bottom (in basso).
I valori di default come già accennato sono "left"
e "middle".
"nowrap" se presente disabilita la funzione di a
capo automatico in modo simile a
"width" definisce la larghezza della cella e può
essere espresso in pixel o in percentuale.
Come valore di default assume la dimensione necessaria per
accogliere il contenuto maggiore posto nella cella, o nelle
celle sulla stessa colonna.
"height" definisce l'altezza della cella e può
essere espresso in pixel.
Come valore di default assume la dimensione necessaria per
accogliere il contenuto posto nella cella, o il maggiore contenuto
nelle celle sulla stessa riga.
"rowspan" serve ad unire più celle di righe
adiacenti.
"colspan" serve ad unire più celle di colonne
adiacenti.
La
sintassi relativa a "rowspan" e "colspan"
è:
<TD
rowspan="num." colspan="num."> contenuto
</TD>
"num."
assume il valore delle celle soprascritte compresa la cella
di partenza.
Il valore di default per "num." È 1
E'
importante ricordarsi di omettere le dichiarazioni <TD></TD>
relative alle celle soprascritte.
Per
rendere più semplice gli argomenti trattati in questo
capitolo sarà analizzato il codice relativo alla tabella
di fig.1
<table align="center" valign="TOP"
cellpadding="20" border="1" >
<caption
align="top"><B>fig.1 </B>esempio
di tabella (questa è la didascalia) </caption>
<tr align="CENTER">
<th>Titolo tab. 1</th>
<th>Titolo tab. 2</th>
<th>Titolo tab. 3</th>
<th>Titolo tab. 4</th>
</tr>
<tr
align="CENTER">
<td>Cella 1-1</td>
<td>Cella 2-1</td>
<td>Cella 3-1</td>
<td>Cella 4-1</td>
</tr>
<tr
align="CENTER">
<td>Cella 1-2</td>
<td>Cella 2-2</td>
<td>Cella 3-2</td>
<td>Cella 4-2</td>
</tr>
<tr
align="CENTER">
<td>Cella 1-3</td>
<td>Cella 2-3</td>
<td>Cella 3-3</td>
<td>Cella 4-3</td>
</tr>
</table>
Un altro esempio è analizzato nel listato relativo
alla fig.2 sottostante.
| fig.2
esempio di tabella (questa è la didascalia) |
| Titolo
tab. 1 |
Titolo
tab. 2 |
Titolo
tab. 3 |
Titolo
tab. 4 |
|
Cella
1-1
|
Cella
3-1 |
Cella
4-1 |
| Cella
3-2 |
Cella
4-2 |
| Cella
1-3 |
Cella
2-3 |
Cella
3-3 |
Cella
4-3 |
<table align="center" valign="TOP"
cellpadding="20" border="1" >
<caption
align="top"><B>fig.2 </B>esempio
di tabella (questa è la didascalia)</caption>
<tr align="CENTER">
<th>Titolo tab. 1</th>
<th>Titolo tab. 2</th>
<th>Titolo tab. 3</th>
<th>Titolo tab. 4</th>
</tr>
<tr align="CENTER">
<td rowspan="2" colspan="2">Cella
1-1</td>
<td>Cella 3-1</td>
<td>Cella 4-1</td>
</tr>
<tr align="CENTER">
<td>Cella 3-2</td>
<td>Cella 4-2</td>
</tr>
<tr align="CENTER">
<td>Cella 1-3</td>
<td>Cella 2-3</td>
<td>Cella 3-3</td>
<td>Cella 4-3</td>
</tr>
</table>
|
