Guida HTML interattiva: Tabelle

Q: Come si crea una tabella in HTML?

Racchiudila in , scrivi un per ogni riga e metti dentro le celle: per le celle di intestazione e per le celle di dati. Ogni riga dovrebbe avere lo stesso numero di celle, a meno che alcune celle non occupino più colonne.

Q: Come rendo responsive una tabella HTML?

Metti la tabella in un contenitore con overflow-x: auto. Su uno schermo stretto la tabella scorre di lato dentro il contenitore invece di allargare l'intera pagina.

Come creare una tabella in HTML

Una tabella è un elemento <table> fatto di righe (<tr>), e ogni riga è fatta di celle: <th> per le celle di intestazione e <td> per le celle di dati.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Table</title>
  <style>
    th, td { border: 1px solid #9ca3af; padding: 6px 10px; }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Name</th>
      <th>Language</th>
      <th>Year</th>
    </tr>
    <tr>
      <td>Ada</td>
      <td>Python</td>
      <td>2023</td>
    </tr>
    <tr>
      <td>Linus</td>
      <td>C</td>
      <td>2021</td>
    </tr>
  </table>
</body>
</html>

La tabella non ha bordi suoi; l'unica regola CSS li aggiunge così puoi vedere le celle. Le colonne nascono dalle celle: la prima cella di ogni riga è la colonna uno, la seconda è la colonna due e così via. Ogni riga dovrebbe avere lo stesso numero di celle. Cancella un <td> e quella riga finisce prima, lasciando un buco.

Le celle <th> sono in grassetto e centrate per impostazione predefinita. È solo l'aspetto; ciò che conta è che sono etichette, ed è di questo che parla la prossima sezione.

Gli elementi della tabella

Elemento	Cos'è
`<table>`	La tabella
`<caption>`	Il titolo della tabella, primo figlio di `<table>`
`<thead>`	Il gruppo delle righe di intestazione
`<tbody>`	Il gruppo delle righe del corpo (una tabella può averne più di uno)
`<tfoot>`	Il gruppo delle righe di piè, come i totali
`<tr>`	Una riga
`<th>`	Una cella di intestazione
`<td>`	Una cella di dati
`<colgroup>`, `<col>`	Colonne, per dare uno stile a un'intera colonna (larghezze, sfondo)

I bordi sono spiegati in bordi tabella HTML, e le celle che occupano più colonne o righe in colspan e rowspan.

Celle di intestazione, scope e caption

Una tabella con intestazioni sia in alto sia sul lato deve dire in che direzione punta ogni intestazione. scope="col" dà il nome alla colonna sottostante, scope="row" alla riga accanto. <caption> dà alla tabella un titolo visibile:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Headers and caption</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    caption { font-weight: bold; padding-bottom: 6px; }
    th, td { border: 1px solid #9ca3af; padding: 6px 10px; }
    thead th { background: #e5e7eb; }
    tbody th { text-align: start; }
  </style>
</head>
<body>
  <table>
    <caption>Opening hours</caption>
    <thead>
      <tr>
        <th scope="col">Day</th>
        <th scope="col">Opens</th>
        <th scope="col">Closes</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Monday</th>
        <td>9:00</td>
        <td>17:00</td>
      </tr>
      <tr>
        <th scope="row">Saturday</th>
        <td>10:00</td>
        <td>14:00</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Con questo markup uno screen reader che arriva sulla cella 14:00 può annunciare "Saturday, Closes, 14:00", quindi il numero non viene mai letto da solo. Per una tabella semplice con una sola riga di intestazione, di solito i browser capiscono le intestazioni anche senza scope, ma scriverlo non costa niente ed elimina ogni ambiguità.

La caption è anche ciò che uno screen reader annuncia quando raggiunge la tabella. Preferiscila a un titolo messo sopra la tabella, che non è collegato a essa.

thead, tbody e tfoot

I tre gruppi dividono le righe in intestazione, corpo e piè. Il piè è il posto giusto per i totali:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>thead tbody tfoot</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { padding: 6px 12px; border-bottom: 1px solid #e5e7eb; }
    thead th { border-bottom: 2px solid #111827; text-align: start; }
    tfoot td, tfoot th { border-top: 2px solid #111827; font-weight: bold; }
    .num { text-align: end; font-variant-numeric: tabular-nums; }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><th scope="col">Item</th><th scope="col" class="num">Price</th></tr>
    </thead>
    <tbody>
      <tr><td>Notebook</td><td class="num">4.50</td></tr>
      <tr><td>Pens (10)</td><td class="num">11.20</td></tr>
      <tr><td>Backpack</td><td class="num">39.00</td></tr>
    </tbody>
    <tfoot>
      <tr><th scope="row">Total</th><td class="num">54.70</td></tr>
    </tfoot>
  </table>
</body>
</html>

Due dettagli rendono leggibili i numeri: text-align: end allinea i punti decimali (ogni prezzo ha due decimali), e font-variant-numeric: tabular-nums dà a ogni cifra la stessa larghezza.

Se scrivi <tr> direttamente dentro <table>, come nel primo esempio, il browser aggiunge comunque un <tbody> attorno alle righe. Ecco perché un selettore CSS come table > tr non trova mai niente: nella pagina le righe sono dentro tbody. Usa table tr, oppure scrivi tu il <tbody>.

Dare stile a una tabella: strisce, hover e larghezza

:nth-child alterna il colore delle righe, :hover evidenzia la riga sotto il puntatore e width: 100% allarga la tabella su tutto il contenitore:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Striped table</title>
  <style>
    table { width: 100%; border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { padding: 8px 12px; text-align: start; }
    thead th { background: #2563eb; color: #fff; }
    tbody tr:nth-child(even) { background: #f3f4f6; }
    tbody tr:hover { background: #dbeafe; }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><th scope="col">Course</th><th scope="col">Lessons</th><th scope="col">Level</th></tr>
    </thead>
    <tbody>
      <tr><td>HTML</td><td>40</td><td>Beginner</td></tr>
      <tr><td>CSS</td><td>55</td><td>Beginner</td></tr>
      <tr><td>JavaScript</td><td>120</td><td>Beginner</td></tr>
      <tr><td>React</td><td>60</td><td>Intermediate</td></tr>
    </tbody>
  </table>
</body>
</html>

text-align: start allinea il testo delle intestazioni con i dati sottostanti; altrimenti th è centrato. start invece di left mantiene l'allineamento corretto nelle lingue da destra a sinistra.

Tabelle responsive che scorrono

Una tabella non può restringersi sotto la larghezza del suo contenuto. Su un telefono, una tabella larga spinge di lato l'intera pagina. Racchiudila invece in un contenitore che scorre:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Scrolling table</title>
  <style>
    .scroll { max-width: 300px; overflow-x: auto; border: 1px solid #e5e7eb; }
    table { border-collapse: collapse; white-space: nowrap; }
    th, td { padding: 6px 12px; border-bottom: 1px solid #e5e7eb; text-align: start; }
  </style>
</head>
<body>
  <div class="scroll" tabindex="0" role="region" aria-label="Plans">
    <table>
      <thead>
        <tr><th scope="col">Plan</th><th scope="col">Price</th><th scope="col">Courses</th><th scope="col">Certificates</th><th scope="col">Support</th></tr>
      </thead>
      <tbody>
        <tr><td>Free</td><td>0</td><td>Some</td><td>No</td><td>Community</td></tr>
        <tr><td>Pro</td><td>12 per month</td><td>All</td><td>Yes</td><td>Email</td></tr>
      </tbody>
    </table>
  </div>
</body>
</html>

Qui il contenitore è limitato a 300 pixel per simulare lo schermo di un telefono; fallo scorrere di lato. tabindex="0" permette a chi usa la tastiera di dare il focus al contenitore e farlo scorrere con i tasti freccia, e role="region" con un aria-label dà un nome a quella tappa.

Le tabelle servono per i dati

Usa una tabella quando il contenuto ha davvero righe e colonne: prezzi, orari, confronti, risultati. Non usarla per mettere le cose una accanto all'altra nella pagina. Le tabelle di layout confondono gli screen reader, che annunciano righe e colonne prive di significato, e non si adattano agli schermi piccoli. Per il layout ci sono flexbox e grid del CSS.

Errori comuni

Righe con un numero diverso di celle. Le righe corte finiscono prima e le colonne non si allineano più.
Usare <td> con testo in grassetto per le intestazioni. Usa <th> così le intestazioni sono vere etichette.
Gli attributi obsoleti border, cellpadding, cellspacing, bgcolor e align. Usa invece il CSS.
Mettere contenuto direttamente in <tr> o <table>, fuori da qualsiasi cella. I browser lo spostano fuori dalla tabella, di solito sopra.
Un titolo sopra la tabella invece di una <caption>.
table > tr nel CSS. Il browser ha inserito un <tbody>; scrivi table tr o tbody tr.

Domande frequenti

Come si crea una tabella in HTML?

Racchiudila in <table>, scrivi un <tr> per ogni riga e metti dentro le celle: <th> per le celle di intestazione e <td> per le celle di dati. Ogni riga dovrebbe avere lo stesso numero di celle, a meno che alcune celle non occupino più colonne.

Che differenza c'è tra th e td?

<th> è una cella di intestazione che dà il nome a una colonna o a una riga, e <td> è una cella di dati. I browser mostrano <th> in grassetto e centrato, e gli screen reader leggono l'intestazione corrispondente prima di ogni cella di dati così i numeri hanno senso.

A cosa servono thead, tbody e tfoot?

Raggruppano le righe nell'intestazione, nel corpo e nel piè (i totali) della tabella. Rendono chiara la struttura alle tecnologie assistive, danno al CSS qualcosa da selezionare e, quando si stampa una tabella lunga, permettono ai browser di ripetere il <thead> su ogni pagina.

Perché la mia tabella HTML non ha bordi?

Per impostazione predefinita le tabelle non hanno bordi. Aggiungili con il CSS: table { border-collapse: collapse; } th, td { border: 1px solid #ccc; }. Il vecchio attributo border="1" è obsoleto.

Come rendo responsive una tabella HTML?

Metti la tabella in un contenitore con overflow-x: auto. Su uno schermo stretto la tabella scorre di lato dentro il contenitore invece di allargare l'intera pagina.

Concetti correlati