Le tabelle possono sembrare difficili inizialmente, ma con un po' di pratica ti accorgerai che sono in realtà molto più semplici di quello che sembrano. Con l'etichetta <table> si introduce una tabella. Ci sono inoltre altre due etichette: <tr> per le linee e <td> per le colonne. La spiegazione migliore però rimane comunque un esempio.
html<table border="1">
<tr>
<td>Linea 1 Cella 1</td>
<td>Linea 1 Cella 2</td>
</tr>
<tr>
<td>Linea 2 Cella 1</td>
<td>Linea 2 Cella 2</td>
</tr>
</table>| Linea 1 Cella 1 | Linea 1 Cella 2 |
| Linea 2 Cella 1 | Linea 2 Cella 2 |
Il contenuto verrà posizionato all'interno delle righe della tabella. Una linea è racchiusa tra le etichette <td> e </td>. L'attributo "border" stabilisce la dimensione del bordo.
Per formare tabelle asimmetriche useremo 'rowspan' per attraversare più di una linea e 'colspan' per attraversare più di una colonna. Per far si che la prima linea valga come titolo per tutte le colonne è possibile utilizzare l'etichetta <th>. In tal caso il titolo verrà visualizzato in grassetto come nell'esempio seguente:
html<table border="1">
<tr>
<th>Colonna 1</th>
<th>Colonna 2</th>
<th>Colonna 3</th>
</tr>
<tr>
<td rowspan="2">Row 1 Cell 1</td>
<td>Riga 1 Cella 2</td>
<td>Riga 1 Cella 3</td>
</tr>
<tr>
<td>Riga 2 Cella 2</td>
<td>Riga 2 Cella 3</td>
</tr>
<tr>
<td colspan="3">Riga 3 Cella 1</td>
</tr>
</table>| Colonna 1 | Colonna 2 | Colonna 3 |
|---|---|---|
| Row 1 Cell 1 | Riga 1 Cella 2 | Riga 1 Cella 3 |
| Riga 2 Cella 2 | Riga 2 Cella 3 | |
| Riga 3 Cella 1 | ||
Con l'aiuto degli attributi 'cellpadding' e 'cellspacing' stabiliamo la distanza tra le celle. La 'Cellspacing' stabilisce la dimensione del bordo e 'cellpadding' la distanza tra il bordo e il contenuto. Nell'esempio seguente è stato aggiunto anche un po' di colore.
html<table border="1" cellspacing="10" bgcolor="rgb(0,255,0)">
<tr>
<th>Colonna 1</th>
<th>Colonna 2</th>
</tr>
<tr>
<td>Riga 1 Cella 1</td>
<td>Riga 1 Cella 2</td>
</tr>
<tr>
<td>Riga 2 Cella 1</td>
<td>Riga 2 Cella 2</td>
</tr>
</table>Per fare la differenza è possibile cancellare il bordo dall'esempio precedente.
La distanza tra le celle e la dimensione del bordo sarà interpretata in pixel dal browser. Usando questa 'legge' un valore di 10 significa in realtà 10 pixel. Questo attributo non è l'unico che usa come unità di misura dei pixel, ma ne conosceremo gli altri man mano che procediamo con i prossimi tutorial.