Tabelle HTML

Puoi creare tabelle utilizzando HTML.

Esempio

Tabella
Questo esempio dimostra come creare tabelle in un documento HTML.
Bordi delle tabelle
Questo esempio dimostra vari tipi di bordi delle tabelle.

（Puoi trovare più esempi nella parte inferiore di questa pagina。）

Tabella

La 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 indica i 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.

<table border="1">
<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>

Verrà visualizzato nel browser come segue:

riga 1, cella 1 riga 1, cella 2
riga 2, cella 1 riga 2, cella 2

Tabella e attributo border

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

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

<table border="1">
<tr>
<td>Riga 1, cella 1</td>
<td>Riga 1, cella 2</td>
</tr>
</table>

Titoli delle tabelle

I titoli delle tabelle sono definiti dal tag <th>.

La maggior parte dei browser visualizzerà i titoli delle tabelle come testo grassetto centrato:

<table border="1">
<tr>
<th>Titolo</th>
<th>Un altro titolo</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>

Verrà visualizzato nel browser come segue:

Titolo Un altro titolo
riga 1, cella 1 riga 1, cella 2
riga 2, cella 1 riga 2, cella 2

La cella vuota nella tabella

In alcuni browser, le celle della tabella senza contenuto non vengono visualizzate bene. Se una cella è vuota (senza contenuto), il browser potrebbe non essere in grado di visualizzare il bordo di questa cella.

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

Il browser potrebbe visualizzarlo così:

La cella vuota nella tabella

Attenzione:Questo bordo della cella vuota non viene visualizzato. Per evitare questo, aggiungi un segnaposto vuoto nella cella vuota per visualizzare il bordo.

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

Verrà visualizzata nel browser come segue:

riga 1, cella 1 riga 1, cella 2
　 riga 2, cella 2

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.
Celle vuote
Questo esempio dimostra come gestire le celle vuote utilizzando " ".
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 nella 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 loro bordi.
Spaziamento delle celle (Cell spacing)
Questo esempio dimostra come utilizzare lo spaziamento delle celle per aumentare la distanza tra le celle.
Aggiungere un colore di sfondo o un'immagine di sfondo alla tabella
Questo esempio dimostra come aggiungere uno sfondo alla tabella.
Aggiungere un colore di sfondo o un'immagine di sfondo alle celle della tabella
Questo esempio dimostra come aggiungere uno sfondo a una o più celle della tabella.
Allineare il contenuto all'interno delle celle della tabella
Questo esempio dimostra come utilizzare l'attributo "align" per allineare il contenuto delle celle in modo da creare una tabella ben progettata.
Proprietà del frame (frame)
Questo esempio dimostra come utilizzare l'attributo "frame" per controllare i bordi intorno alla tabella.

Etichetta della tabella

Tabella Descrizione
<table> Definire la tabella
<caption> Definire il titolo della tabella.
<th> Definire l'intestazione della tabella.
<tr> Definire la riga della tabella.
<td> Definire la cella della tabella.
<thead> Definire l'intestazione della tabella.
<tbody> Definire il corpo della tabella.
<tfoot> Definire il piè di pagina della tabella.
<col> Definire le proprietà utilizzate per le colonne della tabella.
<colgroup> Definire il gruppo di colonne della tabella.