Le tabelle e i loro usi

Del tag <table> e di alcuni dei suoi attributi e si è già accennato nella sezione dedicata ai tags principali, qui commenteremo alcuni altri attributi e faremo alcuni esempi dell'utilizzo delle tabelle per il controllo della disposizioe degli elementi nella pagina.
Tipicamente la sintassi che genera una tabella si presenta come segue:

<table cellspacing="2" cellpadding="2" border="0">
<tr>
    <td> </td>
</tr>
</table>
Abbiamo già visto nella sezione dedicata il significato degli attributi CELLSPACING, CELLPADDING e BORDER associati all'elemento <table>, però qui vediamo che all'interno di questo elemento ne compaiono altri: <td> e </tr>.

L'elemento <tr>

Indica le righe di tabella. Il numero delle righe in una tabella è esattamente definito dal numero degli elementi <tr> che sono rachiusi nei tag <table>.
L'elemento <tr> può avere i seguenti attributi:
ALIGN left|center|right Questo attributo controlla l'allineamento orizzontale del testo all'interno della singola cella
BGCOLOR #rrggbb Questo attributo permette di attribuire colori differenti allo sfondo delle singole celle

L'elemento <td>

Il suo significato letterale è "tabella dati" e indica una determinata cella nella tabella. Questo tag può comparire solo all'interno del tag </tr>.
Ciascuna riga non deve necessariamente comprendere lo stesso numero di celle. All'interno di una cella possono essere immessi tutti gli elementi HTML normalmente accettati all'interno del tag <body>.
Gli attributi permessi sono:
ALIGN left|center|right Questo attributo controlla l'allineamento orizzontale del testo all'interno della singola cella
WIDTH valore o percentuale Questo attributo specifica l'esatto valore, in pixel o in percentuale della finestra del browser, occupato in larghezza da una singola cella. Se il valore non è specificato, e solo una cella appartenente a una riga contiene dati, questa può occupare la larghezza dell'intera tabella, disturbando l'impaginazione del documento
HEIGHT valore o percentuale Questo attributo specifica l'esatto valore, in pixel o in percentuale della finestra del browser, occupato in altezza da una singola cella. Se il valore non è specificato, e solo una cella appartenente a una riga contiene dati, questa può occupare l'altezza dell'intera riga, disturbando l'impaginazione del documento
NOWRAP   L'uso di questo attributo fa si che le linee all'interno di una cella non possano essere interrotte andando a capo per adattarsi alla larghezza della cella. Il suo utilizzo è sconsigliabile.
COLSPAN valore Questo attributo può comparire in qualsiasi cella e indica quante colonne della tabella questa cella può occupare. Il valore di default è 1
ROWSPAN valore Questo attributo può comparire in qualsiasi cella e indica quante righe della tabella questa cella può occupare. Il valore di default è 1
BGCOLOR #rrggbb Questo attributo permette di attribuire colori differenti allo sfondo delle singole celle

Vediamo ora un esempio di tabella:
bambino Bambino che gioca nell'acqua I
B
A
M
B
I
N
I

E

I
L

G
I
O
C
O
bambina Bambina che coglie i fiori nel prato
angioletto Bambino in costume di angioletto

In questa tabella sono stati usati una gran parte degli attributi supportabili dal tag <table> e dai suoi associati <td> e <tr>, per creare un'esempio di impaginazione.

torna all'homepage