Le tabelle a mio avviso sono una delle parti più importanti e funzionali dell'HTML, in quanto
permettono di posizionare ordinatamente dati nei vari punti dello schermo. Vediamo come costruire
una tabella:
<TABLE BORDER="1">
<TR>
<TD>HTML HOUSE
</TD>
</TR>
</TABLE>
Scrivendo queste poche righe otterremo una tabella composta da una sola cella con
dentro la scritta HTML HOUSE, ma vediamo cosa significano i TAG che abbiamo scritto.
TABLE è il marcatore che definisce la tabella e come vedremo più avanti ha diversi attributi
che possono variare l'aspetto della tabella stessa come nell'esempio BORDER, che definisce la larghezza del
bordo esterno della tabella (se scrivete 0 non si vedrà il bordo delle celle). TR stà a significare che vogliamo
inserire una riga e TD sono le celle di quella riga. Come avrete già notato tutti questi
TAG hanno bisogno di quello finale. A meno che non lo abbiate già capito, per inserire nuove righe e nuove celle
basta inserire altri TR e TD ma vediamo come:
<TABLE BORDER="1">
<TR>
<TD>HTML
</TD>
<TD>HOUSE
</TD>
</TR>
</TABLE>
Questo codice ci darà una riga con due celle. Da notare che per TABLE, TR, TD servono i TAG finali.
<TABLE BORDER="1">
<TR>
<TD>HTML
</TD>
</TR>
<TR>
<TD>HOUSE
</TD>
</TR>
</TABLE>
Quest'altro invece imposterà una tabella con due righe con ognuna una cella. Se invece scriviamo:
<TABLE BORDER="1">
<TR>
<TD>HTML
</TD>
<TD>HOUSE
</TD>
</TR>
<TR>
<TD>HTML HOUSE
</TD>
</TR>
</TABLE>
Il computer imposterà una tabella dove ci saranno due righe, quella sopra con due celle,
quella sotto con una cella allineata con la prima cella soprastante. Per rendere
unica la cella sottostante con tutta la larghezza della tabella bisogna aggiungere un altro
comando e cioè COLSPAN seguita come nell'esempio dal numero di colonne che dovranno essere
sostituite alla cella:
<TABLE BORDER="1">
<TR>
<TD>HTML
</TD>
<TD>HOUSE
</TD>
</TR>
<TR>
<TD COLSPAN="2">HTML HOUSE
</TD>
</TR>
</TABLE>
Come avrete notato la tabella viene con due righe di cui quella superiore con due celle, quella inferiore con un'unica cella larga quanto le due soprastanti.
Un codice simile si può utilizzare anche per le colonne nel senso che, se noi vogliamo una colonna
unica che si espanda su più righe basta che inseriamo il comando ROWSPAN:
<TABLE BORDER="1">
<TR>
<TD ROWSPAN="2">HTML
</TD>
<TD>HTML
</TD>
</TR>
<TR>
<TD>HOUSE
</TD>
</TR>
</TABLE>
Se avete trascritto tutto giusto l'effetto è garantito.
