0Pricing
HTML Academy · Lezione

Struttura di thead, tbody e tfoot

Organizzare le righe della tabella in sezioni semantiche di intestazione, corpo e piè di pagina

Struttura di thead, tbody e tfoot è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.

Sezioni di una tabella

Una tabella HTML completa contiene tre sezioni facoltative ma consigliate:

  • <thead> — righe di intestazione
  • <tbody> — righe del corpo (dati principali)
  • <tfoot> — righe del piè di pagina (totali, riepiloghi)

thead

L'elemento <thead> racchiude le righe di intestazione:

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Quantity</th>
      <th>Price</th>
    </tr>
  </thead>
  ...
</table>
<!-- thead rows repeat when printing multi-page tables -->
<!-- Screen readers associate header cells with data cells -->

tbody

L'elemento <tbody> racchiude le righe dei dati principali:

<table>
  <thead>...</thead>
  <tbody>
    <tr>
      <td>Widget A</td>
      <td>5</td>
      <td>$49.99</td>
    </tr>
    <tr>
      <td>Widget B</td>
      <td>3</td>
      <td>$29.99</td>
    </tr>
  </tbody>
</table>

tfoot

L'elemento <tfoot> racchiude le righe del piè di pagina, in genere contenenti totali o riepiloghi:

<table>
  <thead>...</thead>
  <tbody>...</tbody>
  <tfoot>
    <tr>
      <th colspan="2">Total</th>
      <td>$309.92</td>
    </tr>
  </tfoot>
</table>
<!-- tfoot is written after tbody in HTML but renders at the bottom -->
<!-- In print, tfoot appears at the bottom of every page -->

Tabella strutturata completa

Una tabella completa con tutte e tre le sezioni:

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Qty</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Widget A</td><td>2</td><td>$99.98</td></tr>
    <tr><td>Widget B</td><td>1</td><td>$49.99</td></tr>
  </tbody>
  <tfoot>
    <tr><th colspan="2">Grand Total</th><td>$149.97</td></tr>
  </tfoot>
</table>

Perché utilizzare thead, tbody e tfoot?

Vantaggi della struttura delle tabelle:

  • Semantica: i lettori di schermo distinguono intestazioni, dati e riepiloghi
  • Selettori CSS: applichi stili alle sezioni in modo indipendente
  • Stampa: thead viene ripetuto su ogni pagina stampata
  • Scorrimento: può far scorrere tbody indipendentemente utilizzando l'overflow CSS

tbody scorrevole

Renda scorrevole solo il corpo, mantenendo fissa l'intestazione:

table {
  display: flex;
  flex-direction: column;
  height: 300px;
}

tbody {
  overflow-y: auto;
  flex: 1;
}

tbody implicito

Se omette <tbody>, il browser ne aggiunge automaticamente uno:

<!-- Written without tbody: -->
<table>
  <thead>...</thead>
  <tr><td>Data</td></tr>   <!-- browser wraps this in tbody -->
</table>

<!-- Always write tbody explicitly for clarity -->
<!-- Some CSS selectors like tbody:nth-child won't work without explicit tbody -->

Più elementi tbody

Una tabella può contenere più gruppi <tbody>:

<table>
  <thead>...</thead>
  <tbody>
    <tr><td colspan="3"><strong>Category A</strong></td></tr>
    <tr><td>Item 1</td><td>2</td><td>$10</td></tr>
  </tbody>
  <tbody>
    <tr><td colspan="3"><strong>Category B</strong></td></tr>
    <tr><td>Item 2</td><td>5</td><td>$25</td></tr>
  </tbody>
</table>

Stile delle sezioni della tabella

Selezioni le sezioni con i CSS:

thead {
  background: #1e293b;
  color: white;
}

tbody tr:hover {
  background: #f0f9ff;
}

tfoot {
  border-top: 2px solid #334155;
  font-weight: bold;
  background: #f8fafc;
}

Comportamento dei lettori di schermo

Con una struttura thead/tbody corretta, i lettori di schermo possono:

  • Annunciare le intestazioni delle colonne come contesto per ogni cella di dati
  • Spostarsi tra le sezioni (area dell'intestazione e area dei dati)
  • Indicare agli utenti il numero di righe e colonne presenti

Righe multiple in thead

Un thead può contenere più righe per intestazioni complesse:

<thead>
  <tr>
    <th rowspan="2">Product</th>
    <th colspan="2">Q1</th>
    <th colspan="2">Q2</th>
  </tr>
  <tr>
    <th>Units</th><th>Revenue</th>
    <th>Units</th><th>Revenue</th>
  </tr>
</thead>

Verifica rapida

Dove compare in genere tfoot nel codice sorgente HTML rispetto alla tabella visualizzata?

Riepilogo: thead, tbody, tfoot

Concetti essenziali della struttura delle tabelle:

  • <thead> — righe di intestazione (ripetute in fase di stampa)
  • <tbody> — righe dei dati (può essercene più di uno)
  • <tfoot> — righe di riepilogo o dei totali
  • Consente di selezionare le sezioni con i CSS e di migliorare l'accessibilità della lettura della tabella
  • Scriva sempre tbody in modo esplicito, anche se i browser lo aggiungono automaticamente

Domande Frequenti

La lezione «Struttura di thead, tbody e tfoot» è gratuita?

Sì — il testo completo di «Struttura di thead, tbody e tfoot» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.

Cosa imparerò in «Struttura di thead, tbody e tfoot»?

Organizzare le righe della tabella in sezioni semantiche di intestazione, corpo e piè di pagina Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare HTML Academy?

Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Struttura di thead, tbody e tfoot»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione HTML Academy?

Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. table, tr, td e th
  2. Struttura di thead, tbody e tfoot
  3. colspan e rowspan per unire celle
  4. Accessibilità delle tabelle: scope, summary e caption
← Torna a HTML Academy