Corso di HTML

Inserire tabelle

Le tabelle sono molte utilizzate all'interno dei siti web perché permettono di dare una struttura e un ordine al contenuto anche a pagine molto complesse.

Le tabelle vengono aperte e chiuse con l'attributo <TABLE> </TABLE>. Le dimensioni vengono definite con WIDTH (larghezza) e HEIGHT (altezza) e possono essere espresse in pixel o in percentuale della pagina:

<TABLE WIDTH=200>
</TABLE>

In questo caso la larghezza della tabella viene espressa in pixel, quindi se si sceglie questa opzione, a qualsiasi risoluzione venga vista la pagina, la misura della tabella rimarrà' invariata, cioè di 200 pixel.

Mentre se si sceglie una grandezza in percentuale della pagina la tabella sarà diversa a seconda della risoluzione video utilizzata esempio:

<TABLE WIDTH=50%>
</TABLE>

L'attributo <TABLE> genera la tabella mentre con <TR>e<TD> si definiscono i campi presenti all'interno di tale tabella.

Vediamo un esempio:

<tr>

<td>La guida</td>

</tr>

<tr>

<td>Qui impari</td>

</tr>

</table>

Ecco il risultato che si ottiene

Riepilogando il Tag <TR> costruisce una riga e il tag <TD> una colonna e così via.

Lo spazio tra i vari campi di una tabella e' definito all'interno del comando <TABLE> con CELLSPACING=X e CELLPADDING=X (dove X e' la distanza in pixel):

<TABLE CELLPADDING=10 CELLSPACING=10>
</TABLE>

La posizione del testo all'interno di una tabella o di una immagine può essere modificata all'interno dei vari campi esempio:

<TABLE WIDTH=300 HEIGHT=200>

<TD width=100 VALIGN=TOP>
TutorialPc </TD>

<TD WIDTH=100 VALIGN=BOTTOM>
La Guida </TD>

<TD WIDTH=100 VALIGN=MIDDLE>
All'informatica </TD>

</TABLE>

<TABLE WIDTH=300 HEIGHT=200>

<TD width=100 ALIGN=RIGHT>
TutorialPc <TD>

<TD WIDTH=100 ALIGN=CENTER>
La Guida </TD>

<TD WIDTH=100 ALIGN=LEFT>
All'informatica </TD>

</TABLE>

Stesso discorso dei colori vale anche per aggiungere un'immagine allo sfondo ecco un esempio:

<TABLE WIDTH=400 HEIGHT=200>

<TD width=100 BACKGROUND="nomesfondo.jpg">
Testo </TD>

</TABLE>