LE TABELLE

Per incolonnare all'interno della pagina testo od immagini l'html precedente aveva a disposizione solamente il comando
<PRE></PRE>

                                  ma 
                                     i font 
                                            non erano 
                                                      proporzionali.      

Gli elementi fondamentali delle tabelle sono:

<TABLE> </TABLE> che la racchiudono
Gli attributi di questo comando:

BORDER=valore: specifica lo spessore del bordo

<TABLE BORDER=1>

A B C D E F

<TABLE BORDER=5>

A B C D E F

CELLSPACING=valore: definisce una spaziatura tra le celle (allontana una cella dalla successiva)

CELLPADDING=valore: definisce una diversa spaziatura tra le celle (pone lo spazio all'interno)

<TABLE CELLSPACING=10>

A B C D E F

<TABLE CELLPADDING=10>

A B C D E F

Si possono utizzare anche contemporaneamente.

WIDTH=valore%: regola la larghezza della tabella rispetto alla finestra aperta, occupandone la parte richiesta

HEIGHT=valore%: regola l'altezza della tabella rispetto all'altezza della finestra aperta, in modo da mantenere inalterata la proporzione della tabella

<TABLE WIDTH=80%>

A	B	C
D	E	F

<TABLE HEIGHT=50%>

A	B	C
D	E	F
G	H	I

<CAPTION> </CAPTION> per dotare la tabella di un titolo

Il suo unico attributo è:

ALIGN=top, bottom: decide se posizionare il titolo sopra o sotto la tabella.

< TABLE BORDER=1> <CAPTION ALIGN=top>Alfabeto </CAPTION> </TABLE>

Alfabeto A B C D E F G H I

< TABLE BORDER=1> <CAPTION ALIGN=bottom>Alfabeto </CAPTION> </TABLE>

Alfabeto A B C D E F G H I

<TR> </TR> per definire una riga I suoi attributi sono:

ALIGN=left, center, right: allinea in orizzontale il contenuto di ogni cella della riga.

<TR ALIGN=left> <TR ALIGN=center> <TR ALIGN=right>

sinistra A A B centro B C C destra

VALIGN=top, middle, bottom: allinea in verticale il contenuto di ogni cella della riga.

<TR VALIGN=top> <TR VALIGN=middle> <TR VALIGN=bottom>

scrivo sopra A A B in mezzo B C C e sotto

<TD> </TD> per definire una cella normale
Gli attributi sono:

ALIGN=left, center, right

VALIGN=top, middle, bottom
Funzionano come sopra, ma consentono di modificare l'allineamento ad ogni singola cella.

<TABLE BORDER=1> <TR> <TD ALIGN=left> S </TD> <TD ALIGN=center> C </TD> <TD ALIGN=right> D </TD> </TR> <TR> <TD VALIGN=top> sopra </TD> <TD VALIGN=middle> scrive al centro </TD> <TD VALIGN=bottom> sotto </TD> </TR> </TABLE>

S C D sopra scrive al centro sotto

ROWSPAN=valore:è il numero di righe che la cella corrente occupa

COLSPAN=valore:è il numero di colonne che la cella corrente occupa

<TABLE BORDER=1> <TR> < TD ROWSPAN=2> Primo </TD> < TD> 1 </TD> < /TR> < TR> < TD> 2 </TD> < /TR> <TR> < TD ROWSPAN=2> Secondo </TD> < TD> 3 </TD> < /TR> < TR> < TD> 4 </TD> < /TR> < /TABLE>

Primo 1 2 Secondo 3 4

< TABLE BORDER=1> < TR> < TD COLSPAN=2> Primo </TD> < TD COLSPAN=2> Secondo </TD> < /TR> < TR> < TD> 1 < /TD> TD> 2 < /TD> < TD> 3 < /TD> TD> 4 < /TD> </TR> < /TABLE>

Primo Secondo 1 2 3 4

<TH> </TH> per definire una cella di intestazione
Questo comando va usato in alternativa a <TD>, poichè ha la stessa azione semplicemente scrivendo in grassetto il contenuto della cella

< TR> <TH> Primo </TH> <TD> Secondo </TD> </TR>

Primo Secondo 1 2

Per finire:

Gruppi di colonne

Altri comandi sulle tabelle

Alcuni esempi

Celle colorate

a cura di Claudia Ferrari e Giorgio Fontana, ottobre 1995