Tabelle -terza parte-

Allineamento orizzontale della tabella

Per comodita' abbiamo illustrato i metodi di allineamento orizzontale all'interno di un'altra tabella. Cosa che sarebbe obbligatoria nel caso di allineamento verticale, ma vedremo piu' avanti di cosa si tratta.

Tabella non allineata

Tabella allineata al centro

Tabella allineata a destra

<TABLE BORDER=1 WIDTH=50>
<TR>
<TD>Non allineata</TD>
</TR>
</TABLE> <TABLE BORDER=1 WIDTH=50 ALIGN=center>
<TR>
<TD>Allineata al centro</TD>
</TR>
</TABLE> <TABLE BORDER=1 WIDTH=50 ALIGN=right>
<TR>
<TD>Allineata a destra</TD>
</TR>
</TABLE>

Possiamo notare che, come tutti gli altri elementi, anche le tabelle si allineano di default sul margine sinistro della pagina. L'esempio a sinistra ne e' la dimostrazione. Se si osserva il codice del secondo e terzo esempio si notera' che si e' agito all'interno del tag <TABLE> in questo modo:

<TABLE BORDER=1 WIDTH=50 ALIGN=......>

Come negli esempi del capitolo precedente, avremmo potuto agire anche dall'interno del tag <TD> della tabella portante, ma ovviamente solo se in presenza di quest'ultima... Ne consegue che il metodo qui sopra e' utilizzabile in modo indipendente lasciandoci maggiore liberta' d'azione.

Allineamento verticale della tabella

In questo esempio non e' stato impostato nessun allineamento, per evidenziare il fatto che di default la tabellina si posiziona al centro della tabella portante.

default

<TABLE BORDER=1 WIDTH=150 HEIGHT=150> <TR> <TD> <TABLE BORDER=1 WIDTH=50 HEIGHT=50> <TR> <TD>default</TD> </TR> </TABLE> </TD> </TR> </TABLE>

Ma possiamo cogliere l'occasione per imparare un'altra cosa: l'esempio sopra mostra il modo piu' semplice di annidare una tabella. Infatti, come sarebbe possibile fare con qualsiasi altro oggetto, e' sufficente inserirla all'interno della cella della tabella ospite.

top

<TABLE BORDER=1 WIDTH=150 HEIGHT=150> <TR> <TD VALIGN=top> <TABLE BORDER=1 WIDTH=50 HEIGHT=50> <TR> <TD>top</TD> </TR> </TABLE> </TD> </TR> </TABLE>

Ecco l'esempio pratico corredato di codice. La parte in blu mostra il punto su cui si e' agito. Per ottenere lo stesso risultato si potrebbe agire in modo analogo sul tag <TR> appena sopra.

Sostituendo <TD VALIGN=top> con <TD VALIGN=bottom>, ovviamente, la tabellina si sarebbe posizionata in basso.

top + right

<TABLE BORDER=1 WIDTH=150 HEIGHT=150> <TR> <TD VALIGN=top ALIGN=right> <TABLE BORDER=1 WIDTH=50 HEIGHT=50> <TR> <TD>top + right</TD> </TR> </TABLE> </TD> </TR> </TABLE>

Infine, per concludere l'argomento dedicato agli allineamenti, evidenziamo la possibilita' di adottare due attributi contemporaneamente all'interno dello stesso tag.

Prossimo capitolo