Iniziare con una panoramica sulle tabelle. In particolare, verrà esaminata la seguente organizzazione del testo:

Tabelle

Le tabelle in HTML vengono utilizzate per visualizzare dati in righe e colonne, offrendo un modo strutturato per organizzare le informazioni.

Creazione di tabelle

Il tag <table> viene utilizzato per creare una tabella in HTML. Le tabelle sono composte da righe (<tr>) e celle (<td>), che definiscono la struttura e il contenuto della tabella. La struttura di base di una tabella sarà la seguente.
Esempio:

Nell'esempio sopra:

• Il tag <table> viene utilizzato per creare una tabella;
• Ogni tag <tr> rappresenta una riga nella tabella;
• All'interno di ogni riga, i tag <td> rappresentano le celle, definendo il contenuto di ciascuna cella.

Anche se potremmo fermarci qui con le tabelle, possiamo migliorarne la semantica per facilitare la comprensione del loro contenuto da parte dei motori di ricerca.

Intestazioni delle tabelle

Il tag <th> definisce le intestazioni della tabella che rappresentano le intestazioni di colonna o di riga. Deve essere utilizzato all'interno della sezione <thead> di una tabella.
Esempio:

Nell'esempio sopra:

• La sezione <thead> contiene le celle di intestazione della tabella definite utilizzando il tag <th>;
• Ogni tag <th> rappresenta una cella di intestazione.

Corpo della tabella

La sezione tbody deve essere posizionata dopo la sezione thead e racchiudere tutti i dati della tabella ad eccezione delle intestazioni. Tutti gli elementi all'interno di tbody rimangono invariati.
Esempio:

Riepilogo

Le tabelle sono strutturate con una gerarchia di elementi:

1. Tabella

Il tag <table> è l'elemento genitore che definisce l'intera tabella. Contiene tutte le righe e le colonne della tabella.

<table></table>

2. Intestazione della tabella

Il tag <thead> viene utilizzato per raggruppare le righe di intestazione della tabella. Contiene una o più righe (<tr>) di celle di intestazione (<th>), che definiscono le intestazioni delle colonne.

<table>
  <thead></thead>
</table>

3. Corpo della tabella

Il tag <tbody> viene utilizzato per raggruppare le righe principali del contenuto della tabella. Contiene una o più righe (<tr>) di celle di dati (<td>), che definiscono il contenuto principale della tabella.

<table>
  <thead></thead>
  <tbody></tbody>
</table>

4. Righe della tabella

Il tag <tr> rappresenta una riga all'interno della tabella. Contiene una o più celle della tabella (<td> o <th>), che definiscono il contenuto di ciascuna colonna all'interno della riga.

<table>
  <thead>
    <tr></tr>
  </thead>
  <tbody>
    <tr></tr>
    <tr></tr>
  </tbody>
</table>

5. Celle della tabella

Il tag <td> rappresenta una cella di dati standard all'interno del corpo della tabella. Il tag <th> rappresenta una cella di intestazione all'interno della testa della tabella. Ogni cella contiene il contenuto effettivo della tabella, come testo, immagini o altri elementi HTML.

<table>
  <thead>
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Text 1</td>
      <td>Text 2</td>
    </tr>
    <tr>
      <td>Text 3</td>
      <td>Text 4</td>
    </tr>
  </tbody>
</table>

Video tutorial