Tabelle in HTML

Le tabelle HTML permettono agli sviluppatori web di organizzare i dati in righe e colonne.

<table> Elemento table

Ll'elemento <table> ha un contenuto che viene utilizzato per rappresentare una tabella bidimensionale fatta di righe e colonne.

<table>

</table>

<tr> Elemento riga della tabella

L'elemento di riga della tabella, <tr>, viene utilizzato per aggiungere righe ad una tabella prima di aggiungere i dati della tabella e le intestazioni delle tabelle.

<table>
  <tr>
    ...
  </tr>
</table>

<td> Elemento dati della tabella

L'elemento dati della tabella, <td>, può essere annidato all'interno di un elemento riga di tabella, <tr>, per aggiungere una cella di dati ad una tabella.

<table>
  <tr>
    <td>cella 1</td>
    <td>cella 2</td>
  </tr>
</table>

<thead> Elemento di testa della tabella

L'elemento di testa della tabella, <thead>, definisce le intestazioni delle colonne della tabella incapsulate nelle righe della tabella.

<table>
  <thead>
    <tr>
      <th>intestazione 1</th>
      <th>intestazione 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>col 1</td>
      <td>col 2</td>
    </tr>
  </tbody>
</table>

<tbody> Elemento corpo della tabella

L'elemento del corpo della tabella, <tbody>, è un elemento semantico che conterrà tutti i dati della tabella diversi dall'intestazione della tabella e dal contenuto del piè di pagina della tabella.

Se usato, <tbody> conterrà tutti gli elementi della riga della tabella <tr> e indica che gli elementi <tr> costituiscono il corpo della tabella. <table> non può avere sia <tbody> che <tr> come figli diretti.

<table>
<tbody>
<tr>
<td>riga 1</td>
</tr>
<tr>
<td>riga 2</td>
</tr>
<tr>
<td>riga 3</td>
</tr>
</tbody>
</table>

<tfoot> Elemento a piè di pagina

L'elemento piè di pagina della tabella, <tfoot>, utilizza le righe della tabella per dare il contenuto del piè di pagina o per riassumere il contenuto alla fine di una tabella.

<table>
<thead>
<tr>
<th>intestazione 1</th>
<th>intestazione 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>col 1</td>
<td>col 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>footer col 1</td>
<td>footer col 2</td>
</tr>
</tfoot>
</table>

<th> Elemento intestazione

L'elemento di intestazione della tabella, <th>, viene utilizzato per aggiungere titoli a righe e colonne di una tabella e deve essere racchiuso in un elemento di riga della tabella, <tr>.

<table>
<tr>
<th>col uno</th>
<th>col due</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>

Attributo colspan

L'attributo colspan su un elemento di intestazione della tabella <th> o di dati della tabella <td> indica quante colonne deve coprire quella particolare cella all'interno della tabella.

Il valore del colspan è impostato di default a 1 e prende qualsiasi numero intero positivo compreso tra 1 e 1000.

Attributo rowspan

Simile al colspan, l'attributo rowspan su un'intestazione della tabella o su un elemento di dati della tabella indica quante righe quella particolare cella deve coprire all'interno della tabella.

Il valore dell'intervallo di righe è impostato di default a 1 e prende qualsiasi numero intero positivo fino a 65534.