Primi passi con HTML - Lezione 5 - Tabelle

10/10/2025, by Ivan

Una delle forme più importanti per la memorizzazione delle informazioni è la tabella. In tabelle vengono conservati dati in Excel, Access e in molti altri database. Le tabelle presentano i dati in modo chiaro e comprensibile, rendendo facile la creazione di grafici e diagrammi.
In questa lezione vedremo come creare tabelle in HTML. Per farlo useremo i tag <table>, <tr>, <td>, <th>, <thead>, <tbody> e <tfoot>.

Tag table

TABLE è il tag principale della tabella: al suo interno vengono inseriti tutti gli altri tag che la compongono.

<table>
</table>

Tutti gli altri tag verranno scritti all’interno di questo tag.

Tag tr

TR è il tag che definisce una riga. Ogni riga è racchiusa tra i tag <tr></tr>. Se vogliamo avere tre righe in una tabella, dobbiamo scrivere tre coppie di tag <tr></tr>:

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

Tag td

TD definisce una cella. Ogni cella deve trovarsi all’interno di un tag <tr>. Per visualizzare correttamente la tabella, ogni riga deve avere lo stesso numero di celle. Creiamo una tabella con quattro celle per riga:

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Ora riempiamo la tabella con dei dati:

<table>
  <tr>
    <td>Numero</td>
    <td>Cognome</td>
    <td>Nome</td>
    <td>Patronimico</td>
  </tr>
  <tr>
    <td>1</td>
    <td>Ivanov</td>
    <td>Ivan</td>
    <td>Ivanovic</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Petrov</td>
    <td>Pietro</td>
    <td>Petrovic</td>
  </tr>
</table>

Ora possiamo strutturare la tabella logicamente, dividendola in tre sezioni: thead (intestazione), tbody (contenuto) e tfoot (piè di pagina).

Tag tbody

TBODY non è obbligatorio, ma può essere utilizzato per indicare che qui si trova il contenuto principale della tabella.

<table>
  <tbody>
    <tr>
      <td>Numero</td>
      <td>Cognome</td>
      <td>Nome</td>
      <td>Patronimico</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Ivanov</td>
      <td>Ivan</td>
      <td>Ivanovic</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Petrov</td>
      <td>Pietro</td>
      <td>Petrovic</td>
    </tr>
  </tbody>
</table>

Tag thead

THEAD serve per creare l’intestazione della tabella. Inseriamo la prima riga all’interno di thead.

<table>
  <thead>
    <tr>
      <td>Numero</td>
      <td>Cognome</td>
      <td>Nome</td>
      <td>Patronimico</td>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>Ivanov</td>
      <td>Ivan</td>
      <td>Ivanovic</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Petrov</td>
      <td>Pietro</td>
      <td>Petrovic</td>
    </tr>
  </tbody>
</table>

Ora, invece di usare le celle td, utilizziamo le celle th per indicare che si tratta dei titoli delle colonne:

<table>
  <thead>
    <tr>
      <th>Numero</th>
      <th>Cognome</th>
      <th>Nome</th>
      <th>Patronimico</th>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>Ivanov</td>
      <td>Ivan</td>
      <td>Ivanovic</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Petrov</td>
      <td>Pietro</td>
      <td>Petrovic</td>
    </tr>
  </tbody>
</table>

Se il tuo browser è aggiornato, i titoli delle colonne dovrebbero apparire in grassetto. Rimane ora da aggiungere il piè di pagina con il tag tfoot.

Tag tfoot

TFOOT definisce il piè di pagina della tabella.

<table>
  <thead>
    <tr>
      <th>Numero</th>
      <th>Cognome</th>
      <th>Nome</th>
      <th>Patronimico</th>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>Ivanov</td>
      <td>Ivan</td>
      <td>Ivanovic</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Petrov</td>
      <td>Pietro</td>
      <td>Petrovic</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Creazione tabella, anno 2012</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>

Attributo colspan

Uno degli attributi più importanti del tag td è colspan, che consente di unire più celle. Guardiamo il nostro piè di pagina: abbiamo quattro celle, ma solo una contiene del testo. Possiamo quindi unirle tutte usando l’attributo colspan.

<table>
  <thead>
    <tr>
      <th>Numero</th>
      <th>Cognome</th>
      <th>Nome</th>
      <th>Patronimico</th>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>Ivanov</td>
      <td>Ivan</td>
      <td>Ivanovic</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Petrov</td>
      <td>Pietro</td>
      <td>Petrovic</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">Creazione tabella, anno 2012</td>
    </tr>
  </tfoot>
</table>

Ora abbiamo una sola grande cella larga quanto quattro celle unite. Il valore dell’attributo colspan indica il numero di celle combinate.

Extra Block Types (EBT) - Nuova esperienza con Layout Builder❗

❗Extra Paragraph Types (EPT) - Nuova esperienza con Paragraphs