Tabelle -seconda parte-

Altezza e larghezza

La tabella sotto e' caratterizzata da misure preimpostate che la obbligano ad assumere le dimensioni volute. Questo non e' del tutto vero, si tratta infatti delle dimensioni minime che la tabella assume. L'unica misura che verra' per il momento rispettata e' la larghezza. Ci spiegheremo meglio nel prossimo esempio.

<TABLE BORDER=1 WIDTH=200 HEIGHT=100>
<TR>
<TD>Cella 1</TD>
</TR>
<TR>
<TD>Cella 2</TD>
</TR>
</TABLE>

Altezza non rispettata..

In questo esempio la tabella rispetta solo l'attributo WIDTH.
Notare che l'altezza e' stata impostata a soli 2 pixel.

<TABLE BORDER=1 WIDTH=200 HEIGHT=2>
<TR>
<TD>Cella 1</TD>
</TR>
<TR>
<TD>
Questa e' la dimostrazione
che l'altezza non verra'
rispettata 
</TD>
</TR>
</TABLE>

Se inserissimo al suo interno un oggetto di larghezza superiore (ad esempio un'immagine larga 250 pixel) anche quest'ultima imposizione verrebbe ignorata.

Negli esempi precedenti abbiamo definito i valori di HEIGHT e WIDTH in termini di pixel. Allo stesso modo si potrebbero definire le misure in percentuale:

<TABLE BORDER=1 WIDTH=50% HEIGHT=50%>
<TR>
<TD>Cella 1</TD>
</TR>
</TABLE>

in questo caso la tabella occupa meta' dello spazio della pagina stessa, ma viene rispettata solo la misura che riguarda la larghezza. Infatti l'attributo HEIGHT, applicato alle tabelle, e' dipendente dal contesto. Questo significa che se la tabella dell'esempio fosse posta in una pagina vuota verrebbe rispettata anche la misura relativa all'altezza.

Cella 1

NOWRAP

Questo attributo regola in qualche modo la larghezza della tabella, in quanto impedisce il ritorno a capo del testo. In alcuni casi puo' rivelarsi estremamente utile. Va applicato al tag <TD>.

Il sorgente:

<TABLE BORDER=1>
<TR>
<TD NOWRAP>Applicando NOWRAP si impedisce il ritorno a capo del testo</TD>
</TR>
</TABLE>

Allineamento orizzontale dei contenuti

cella 1

cella 2

cella 3

Prestando un minimo di attenzione possiamo dipanare l'apparente matassa rappresentata da questa tabella. Esaminiamola gradualmente partendo dalla cella 1 nella lista che segue:

cella 1 - nessun allineamento
cella 2 - allineamento al centro agendo all'interno del tag <TD ALIGN=center>
cella 3 - allineamento a destra agendo all'interno del tag <TD ALIGN=right>

Ecco comunque il sorgente completo:

<TABLE BORDER=1 WIDTH=400 HEIGHT=50>
<TR>
<TD> cella 1 </TD>
<TD ALIGN=center> cella 2 </TD>
<TD ALIGN=right> cella 3 </TD>
</TR>
</TABLE>

In questo caso abbiamo allineato contemporaneamente le 3 celle agendo sul solo tag <TR>

cella 1

cella 2

cella 3

allineamento sul tag <TR> (<TR ALIGN=center>)
cella 1 - ...................
cella 2 - ...................
cella 3 - ...................

<TABLE BORDER=1 WIDTH=400 HEIGHT=50>
<TR ALIGN=center>
<TD> cella 1 </TD>
<TD> cella 2 </TD>
<TD> cella 3 </TD>
</TR>
</TABLE>

Allineamento verticale dei contenuti

In questo caso allineeremo i contenuti in senso verticale facendo uso dell'attributo VALIGN (vertical align, appunto), influenzando solamente i tag <TD>

cella 1

cella 2

cella 3

cella 1 - allineamento in basso agendo all'interno del tag <TD VALIGN=bottom>
cella 2 - nessun allineamento
cella 3 - allineamento in alto agendo all'interno del tag <TD VALIGN=top>

<TABLE BORDER=1 WIDTH=400 HEIGHT=50>
<TR>
<TD VALIGN=bottom> cella 1 </TD>
<TD> cella 2 </TD>
<TD VALIGN=top> cella 3 </TD>
</TR>
</TABLE>

E questo e' l'ultimo degli esempi riguardanti l'allineamento dei contenuti delle tabelle.

cella 1

cella 2

cella 3

allineamento sul tag <TR> (<TR VALIGN=top>)
cella 1 - ...................
cella 2 - ...................
cella 3 - llineamento in basso agendo all'interno del tag <TD VALIGN=bottom>

Si noti che nonostante i contenuti siano stati precedentemente interessati dal tag <TR>, abbiamo annullato la sua influenza sull'ultima cella agendo direttamente sul proprio tag <TD>.

<TABLE BORDER=1 WIDTH=400 HEIGHT=50>
<TR VALIGN=top>
<TD> cella 1 </TD>
<TD> cella 2 </TD>
<TD VALIGN=bottom> cella 3 </TD>
</TR>
</TABLE>

Prossimo capitolo