Tag HTML <table>

Il tag <table> definisce una tabella HTML. È un contenitore per gli elementi che costruiscono le righe, le celle e le intestazioni della tabella, visualizzando dati tabulari — informazioni che hanno una relazione significativa tra righe e colonne.

Questa pagina spiega come strutturare correttamente una tabella, come renderla accessibile agli screen reader e quali proprietà CSS sostituiscono i vecchi attributi presentazionali non più validi in HTML5.

Struttura della tabella

Una tabella è composta da alcuni elementi che collaborano tra loro:

<tr> definisce una riga della tabella.
<th> definisce una cella di intestazione — il suo testo è in grassetto e centrato per impostazione predefinita.
<td> definisce una cella dati.
<caption> assegna un titolo alla tabella.
<thead>, <tbody> e <tfoot> raggruppano le righe di intestazione, corpo e piè di pagina.
<colgroup> consente di applicare stili a intere colonne.

Raggruppare le righe con <thead> e <tbody> va oltre il semplice ordine nel markup: comunica al browser (e alle tecnologie assistive) quale riga è l'intestazione. Permette inoltre al corpo di scorrere mantenendo fissa l'intestazione, e consente di stilizzare separatamente le righe di intestazione e quelle del corpo.

Suggerimento

Usa <th> per qualsiasi cella che etichetta una riga o una colonna. Il suo valore principale è l'accessibilità: gli screen reader annunciano l'intestazione durante la lettura di una cella dati, così un utente che non può vedere la griglia sa comunque cosa significa ogni valore. Inoltre, le celle di intestazione sono in grassetto e centrate per impostazione predefinita e aiutano i motori di ricerca a comprendere la struttura della tabella.

Sintassi

Il tag <table> è accoppiato. Il contenuto viene scritto tra il tag di apertura (<table>) e quello di chiusura (</table>).

Esempio del tag HTML `<table>`:

Tag HTML <table>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 80%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>Upcoming release dates</caption>
      <thead>
        <tr>
          <th scope="col">Month</th>
          <th scope="col">Date</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">June</th>
          <td>10.06.2018</td>
        </tr>
        <tr>
          <th scope="row">July</th>
          <td>15.07.2018</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Provalo tu stesso »

Risultato

Rendere le tabelle accessibili

Una griglia formattata visivamente è facile da scorrere con gli occhi, ma uno screen reader annuncia le celle una alla volta. Queste funzionalità gli forniscono il contesto necessario:

<caption> è il nome accessibile della tabella. Posizionalo come primo figlio di <table>. Gli utenti di screen reader lo sentono quando raggiungono la tabella, così sanno di cosa trattano i dati prima di esplorarli.
<th scope="col"> contrassegna una cella come intestazione dell'intera colonna; <th scope="row"> la contrassegna come intestazione della sua riga. Con questi attributi, uno screen reader può annunciare "Month: June" invece di solo "June", collegando ogni valore alla sua etichetta.

Per tabelle complesse — dove una cella è correlata a intestazioni che non si trovano semplicemente in cima alla colonna o all'inizio della riga (ad esempio, intestazioni che si estendono su più colonne) — scope non è sufficiente. Usa il pattern headers/id: assegna un id univoco a ogni <th>, poi elenca gli id pertinenti nell'attributo headers di ogni <td>.

<table>
  <caption>Quarterly revenue by region</caption>
  <thead>
    <tr>
      <th id="region">Region</th>
      <th id="q1">Q1</th>
      <th id="q2">Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="europe" headers="region">Europe</th>
      <td headers="europe q1">120</td>
      <td headers="europe q2">150</td>
    </tr>
  </tbody>
</table>

Attributi

Pericolo

Gli attributi del tag <table> non sono supportati in HTML5. Per lo stile delle tabelle utilizza le proprietà CSS elencate di seguito.

Attributo	Valore	Descrizione	Proprietà CSS
align	left center right	Definisce come la tabella deve essere allineata rispetto al testo circostante. Non supportato in HTML5.	margin
bgcolor	rgb(x,x,x) #xxxxxx colorname	Definisce il colore di sfondo della tabella. Non supportato in HTML5.	background-color
border	1 0	Definisce la dimensione del bordo che circonda la tabella. Non supportato in HTML5.	border
cellpadding	pixels	Definisce lo spazio tra la parete della cella e il contenuto della cella. Non supportato in HTML5.	padding
cellspacing	pixels	Definisce lo spazio tra le celle. Non supportato in HTML5.	border-spacing
frame	void above below hsides lhs rhs vsides box border	Definisce quale lato del bordo che circonda la tabella deve essere visualizzato. Non supportato in HTML5.	border-style border-width
rules	none groups rows cols all	Definisce quali parti dei bordi interni devono essere visibili. Non supportato in HTML5.	border (Usa questa proprietà in combinazione con i tag HTML thead, tbody, tfoot, col o colgroup).
width	pixels	Definisce la larghezza della tabella. Non supportato in HTML5.	width

Il tag <table> supporta anche gli Attributi Globali e gli Attributi Evento.

Sostituire i vecchi attributi con CSS

Gli attributi presentazionali sopra elencati (border, cellpadding, cellspacing, align, bgcolor e così via) sono obsoleti in HTML5. Stilizza la tabella con CSS. Questo esempio riproduce una tabella con bordi, spaziatura interna e centrata senza alcun attributo deprecato:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        /* width="80%" + align="center" */
        width: 80%;
        margin: 30px auto;
        /* cellspacing="0" — collapse the double borders */
        border-collapse: collapse;
        /* bgcolor on the table */
        background-color: #f9f9f9;
      }
      th,
      td {
        /* border="1" */
        border: 1px solid #666;
        /* cellpadding="10" */
        padding: 10px;
        /* align="left" inside cells */
        text-align: left;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>Styled with CSS, not attributes</caption>
      <thead>
        <tr>
          <th scope="col">Month</th>
          <th scope="col">Date</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">June</th>
          <td>10.06.2018</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Una mappatura rapida degli attributi più comuni con le rispettive sostituzioni CSS:

border → border
cellpadding → padding su <th>/<td>
cellspacing → border-spacing, oppure border-collapse: collapse per eliminare gli spazi
align → margin (tabella) o text-align (celle)
bgcolor → background-color
width → width

Non usare le tabelle per il layout

Un <table> dovrebbe contenere solo dati tabulari — contenuti con reali relazioni riga/colonna. Non usarlo per posizionare aree di pagina come barre laterali, navigazione o colonne di testo. Le tabelle usate per il layout confondono gli screen reader (che cercano di annunciare relazioni intestazione/cella inesistenti) e sono rigide e difficili da rendere responsive.

Per il layout di pagina, usa invece i moderni strumenti CSS:

CSS Grid per layout bidimensionali (righe e colonne) — il sostituto naturale per strutture di pagina a griglia.
Flexbox per layout monodimensionali, come una riga di schede o una barra di navigazione.

Consulta i template di layout HTML per strutture già pronte.

Esercitazione

Pratica

Quale affermazione sugli elementi della tabella HTML è corretta?

L'elemento td definisce una cella dati, l'elemento th definisce una cella di intestazione e tr definisce una riga.L'elemento th viene utilizzato per creare una nota a piè di pagina in fondo alla tabella.L'elemento td è l'unico modo per inserire immagini in una pagina web.L'elemento caption deve essere posizionato dopo il tag di chiusura della tabella.