Corso di HTML
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>
<TR><TD>
L'attributo <TABLE> genera la tabella mentre con <TR>e<TD> si definiscono i campi presenti all'interno di tale tabella.
Vediamo
un esempio:
<table border="1" width="400">
<tr>
<td>TutorialPc</td>
<td>La guida</td>
</tr>
<tr>
<td>All'informatica</td>
<td>Qui impari</td>
</tr>
</table>
Ecco il risultato che si ottiene:
TuttoPc | La guida |
All'informatica | Qui impari |
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>
Ogni campo può avere un colore di sfondo cioè background diverso dagli altri o ancora uno sfondo con un'immagine.
<TABLE
WIDTH=300 HEIGHT=200>
<TD width=100 BGCOLOR="green">
TuttoPc
</TD>
<TD WIDTH=100 BGCOLOR="yellow">
La guida
</TD>
<TD WIDTH=100 BGCOLOR="red">
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>