I tag <table>, <thead>, <tbody>, <tfoot>, <th>, <tr> e <td>
Il tag <table> è il contenitore più esterno della tabella. Può contenere una didascalia dentro un tag <caption> che dovrà essere il primo elemento della tabella. Il tag <caption> può contenere paragrafi ed altri elementi di testo.
Il tag <tr> definisce una riga della tabella ed il tag <td> contiene una cella. Perciò il numero di <tr> definisce il numero di righe ed il numero di <td> in ogni <tr> definisce il numero di colonne.
Ciascuna riga di una tabella deve avere lo stesso numero di celle delle altre.
Possiamo aggiungere i tag <thead>, <tbody> e <tfoot> per indicare che alcune righe della tabella definiscono una intestazione, un corpo e un piede della tabella. Il tag <tfoot> va però indicato prima del tag <tbody> in modo che il browser possa tener conto della parte iniziale e della parte finale della tabella prima di caricare tutti i dati. Il contenuto del tag <tfoot> apparirà comunque nel browser dopo il corpo della tabella.
Il tag <th> contiene una intestazione e non un vero e proprio dato. E' possibile inserirlo dentro dentro un <thead> per definire una intestazione di colonna (con l'attributo scope="col") o una intestazione di riga (con l'attributo scope="row").
Se vogliamo che una singola cella si espanda per più colonne possiamo usare l'attributo colspan="n" dove n è il numero di colonne per cui vogliamo che la cella si espanda. Se vogliamo che la cella si espanda invece per più righe useremo l'attributo rowspan="n".
<table>
<caption>Esempio di tabella con tre righe e tre colonne</caption>
<tr>
<td>riga 1 colonna 1</td>
<td>riga 1 colonna 2</td>
<td>riga 1 colonna 3</td>
</tr>
<tr>
<td>riga 2 colonna 1</td>
<td>riga 2 colonna 2</td>
<td>riga 2 colonna 3</td>
</tr>
<tr>
<td>riga 3 colonna 1</td>
<td>riga 3 colonna 2</td>
<td>riga 3 colonna 3</td>
</tr>
</table>
<table>
<caption>Esempio di tabella con intestazione, corpo e piede</caption>
<thead>
<tr>
<td>riga 1 colonna 1</td>
<td>riga 1 colonna 2</td>
<td>riga 1 colonna 3</td>
</tr>
</thead>
<tfoot>
<tr>
<td>riga 2 colonna 1</td>
<td>riga 2 colonna 2</td>
<td>riga 2 colonna 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>riga 3 colonna 1</td>
<td>riga 3 colonna 2</td>
<td>riga 3 colonna 3</td>
</tr>
<tr>
<td>riga 4 colonna 1</td>
<td>riga 4 colonna 2</td>
<td>riga 4 colonna 3</td>
</tr>
<tr>
<td>riga 5 colonna 1</td>
<td>riga 5 colonna 2</td>
<td>riga 5 colonna 3</td>
</tr>
</tbody>
</table>
<table>
<caption>Esempio di tabella con intestazione di tabella, di colonna e di riga</caption>
<thead>
<tr>
<th scope="col">intestazione colonna 1</th>
<th scope="col">intestazione colonna 2</th>
<th scope="col">intestazione colonna 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>riga 1 colonna 1</td>
<td>riga 1 colonna 2</td>
<td>riga 1 colonna 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">intestazione riga 2</th>
<td>riga 2 colonna 2</td>
<td>riga 2 colonna 3</td>
</tr>
<tr>
<th scope="row">intestazione riga 3</th>
<td>riga 3 colonna 2</td>
<td>riga 3 colonna 3</td>
</tr>
<tr>
<th scope="row">intestazione riga 4</th>
<td>riga 4 colonna 2</td>
<td>riga 4 colonna 3</td>
</tr>
</tbody>
</table>
<table>
<caption>Esempio di tabella con righe e colonne che si espandono</caption>
<tr>
<td colspan="3">un'unica riga che si espande per tre colonne</td>
</tr>
<tr>
<td rowspan="2">riga 2 e 3 unite colonna 1</td>
<td>riga 2 colonna 2</td>
<td>riga 2 colonna 3</td>
</tr>
<tr>
<td>riga 3 colonna 2</td>
<td>riga 3 colonna 3</td>
</tr>
<tr>
<td>riga 4 colonna 1</td>
<td>riga 4 colonna 2</td>
<td>riga 4 colonna 3</td>
</tr>
<tr>
<td>riga 5 colonna 1</td>
<td>riga 5 colonna 2</td>
<td>riga 5 colonna 3</td>
</tr>
</table>
/* no css */
// no js