| ASP | PHP | Download | Flash | NEWS | Grafica | .NET | Basi Banner | PhpNuke | Forum | Top100 | Webring |

.:: Siti Partner ::.

Le tabelle

Le tabelle, in HTML, oltre ad un uso classico (catalogazione ecc..) vengono usate per creare il layout delle pagine web. UN giusto utilizzo, infatti, anche se comunque limitato, consente di creare siti web di grande impatto visivo.

Per inserire una tabella si utilizzano i tag <table></table>. Al loro interno vanno ancora i tag <tr></tr> che marcano una riga; nidificati tra questi, a loro volta, vanno i tag <td></td> che delineano invece le colonne (celle). All'interno di questi ultimi andranno gli elementi racchiusi nella tabella. Il codice sorgente avrà così la seguente struttura:

<table width=100 height=100 align=center bgcolor=#ffffff background="path/img.jpg" cellspacing=0 cellpadding=0>
<tr>
<td width=50 height=50 valign=top bgcolor=#000000 background="path/img.gif">testo, immagini, altri elementi</td>
</tr>
</table>

Come si può notare sono stati inseriti degli attributi propri delle tabelle (e delle celle in esse contenute):

width - larghezza tabella o cella espressa in pixel;
height - altezza tabella o cella espressa in pixel;
align - allineamento tabella o allineamento elementi cella (center, left, right, justify);
bgcolor - colore di sfondo della tabella o della cella, espresso in codici esadecimali o nomi dei colori;
background - immagine di sfondo della tabella o della cella;
valign - allineamento verticale degli elementi contenuti nella cella (top, middle, bottom...);
cellspacing - lo spazio (in pixel) tra le celle che compongono la tabella;
cellpadding - lo spessore (in pixel) del margine delle celle che compongono la tabella;

Esistono inoltre due ulteriori attributi, colspan=numero e rowspan=numero, che applicati ad una cella (td) specificano rispettivamente il numero di colonne e righe espandibili su una cella:

1	2
3

ecco il codice che genera questa piccola tabella:

<table width="100" border="1" cellspacing="0" cellpadding="0" align="center">
<tr> ........................................(inizio prima riga)
<td>1</td> .............................(prima cella/colonna)
<td>2</td> .............................(seconda cella/colonna)
</tr> ......................................(fine prima riga)
<tr> .......................................(inizio seconda riga)
<td colspan="2">3</td> .........(terza cella/colonna)
</tr> ......................................(fine seconda riga)
</table>

Lezione successiva =>

Torna all'indice 

.:: Le sezioni ::.

.:: Script & File ::.

.:: FAQ ::.

.:: Tutorials ::.