Tabelle HTML

Una tabella è fatta da molte piccole celle, che sono organizzate in modo ordinato, con molte righe e colonne. Questo layout composto da righe e colonne è chiamato tabella, e la tabella è definita dal tag table.

Esempio di tabella HTML:

Esempio online

Tabella HTML
Questo esempio dimostra come creare tabelle in un documento HTML.

<table border="1" width="300">
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>

Tabelle HTML

Una tabella è definita dal tag <table>. Ogni tabella ha diverse righe (definite dal tag <tr>), e ogni riga è divisa in diverse celle (definite dal tag <td>). La lettera td sta per dati della tabella (table data), ossia il contenuto delle celle di dati. Le celle di dati possono contenere testo, immagini, elenchi, paragrafi, moduli, linee orizzontali, tabelle, ecc.

Esempio di tabella

<table border="1">
　　　　<tr>
　　　　　　　　<td>riga 1, colonna 1</td>
　　　　　　　　<td>riga 1, colonna 2</td>
　　　　</tr>
　　　　<tr>
　　　　　　　　<td>riga 2, colonna 1</td>
　　　　　　　　<td>riga 2, colonna 2</td>
　　　　</tr>
</table>

Visualizzazione nel browser come segue:

Tabella HTML e attributo border

Se non si definisce l'attributo border, la tabella non mostrerà i bordi. A volte può essere utile, ma nella maggior parte dei casi, desideriamo visualizzare i bordi.

Utilizza l'attributo border per visualizzare una tabella con bordi:

<table border="1">
　　　　<tr>
　　　　　　　　<td>riga 1, colonna 1</td>
　　　　　　　　<td>riga 1, colonna 2</td>
　　　　</tr>
</table>

Intestazione della tabella HTML

Le intestazioni delle tabelle HTML sono definite utilizzando il tag <th>.

La maggior parte dei browser visualizzerà le intestazioni in testo grassetto e centrato:

<table border="1">
　　　　<tr>
　　　　　　　　<th>Intestazione uno</th>
　　　　　　　　<th>Intestazione due</th>
　　　　</tr>
　　　　<tr>
　　　　　　　　<td>riga 1, colonna 1</td>
　　　　　　　　<td>riga 1, colonna 2</td>
　　　　</tr>
　　　　<tr>
　　　　　　　　<td>riga 2, colonna 1</td>
　　　　　　　　<td>riga 2, colonna 2</td>
　　　　</tr>
</table>

Visualizzazione nel browser come segue:

Più esempi

Tabella senza bordi
Questo esempio dimostra una tabella senza bordi.

Intestazione nella tabella (Heading)
Questo esempio dimostra come visualizzare l'intestazione della tabella.

Tabella con titolo
Questo esempio dimostra una tabella con un titolo (caption).

Celle di tabella che vanno oltre una riga o una colonna
Questo esempio dimostra come definire celle di tabella che vanno oltre una riga o una colonna.

Etichette all'interno della tabella
Questo esempio dimostra come visualizzare gli elementi all'interno di diversi elementi.

Margine delle celle (Cell padding)
Questo esempio dimostra come utilizzare il padding delle celle per creare uno spazio tra il contenuto delle celle e i bordi.

Spaziatura tra le celle (Cell spacing)
Questo esempio dimostra come utilizzare lo spazio tra le celle per aumentare la distanza tra le celle.

Etichette HTML per tabelle