Qual è la struttura di una tabella in HTML?

La struttura di una tabella in HTML è definita da diversi elementi:

• <table>: Contenitore della tabella.
• <caption>: Titolo opzionale della tabella.
• <colgroup> e <col>: Elementi opzionali per raggruppare le colonne e applicare stili.
• <thead>: Sezione delle intestazioni delle colonne.
• <tbody>: Sezione del contenuto principale della tabella.
• <tfoot>: Sezione del piè di pagina della tabella.
• <tr>: Riga della tabella.
• <th>: Cella di intestazione in una riga.
• <td>: Cella di dati in una riga.

Gli elementi <thead>, <tbody> e <tfoot> aiutano a raggruppare le righe per significato e possono essere usati dai browser per ottimizzare la visualizzazione di tabelle grandi. All'interno di queste sezioni si trovano gli elementi <tr>. Dentro <tr>, ci sono <th> (in <thead>, a volte in <tbody> o <tfoot>) o <td> (in <tbody> e <tfoot>, a volte in <thead>).

Esempio di struttura di base:

<table>
  <caption>
    Lista dei prodotti
  </caption>
  <thead>
    <tr>
      <th>Nome</th>
      <th>Prezzo</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Prodotto 1</td>
      <td>100</td>
    </tr>
    <tr>
      <td>Prodotto 2</td>
      <td>150</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Totale: 250</td>
    </tr>
  </tfoot>
</table>