W3docs
it
Accedi

Tabelle HTML

Le tabelle HTML consentono di organizzare dati come testo, immagini e link in righe e colonne di celle. Prova gli esempi!

In HTML, puoi creare tabelle per il tuo sito web usando il tag <table> insieme ai tag <tr>, <td> e <th>.

Le tabelle HTML consentono di visualizzare dati (ad es. immagini, testo, link) in colonne e righe di celle. Le righe di una tabella possono essere raggruppate in sezioni di intestazione, piè di pagina e corpo tramite gli elementi <thead>, <tfoot> e <tbody>, rispettivamente.

In HTML5, è possibile inserire <tfoot> prima o dopo il tag <tbody>. Devono però venire dopo gli elementi <caption>, <colgroup> e <thead>.

La maggior parte degli attributi dell'elemento <table> non è utilizzata in HTML5. Se vuoi stilizzare l'aspetto della tabella, puoi usare CSS al suo posto.

Tabelle dati vs. tabelle di layout. Usa le tabelle solo per i dati tabulari — informazioni che hanno una relazione significativa tra righe e colonne. Non usare le tabelle per disporre una pagina (posizionare una barra laterale, una barra di navigazione, ecc.). Le tabelle di layout confondono i lettori di schermo e rendono difficile il design responsivo. Per il layout di pagina, usa CSS Flexbox o Grid.

Sintassi

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

Esempio del tag HTML <table>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table style="width:80%;">
      <tr>
        <th>Month</th>
        <th>Date</th>
      </tr>
      <tr>
        <td>January</td>
        <td>10.01.2014</td>
      </tr>
      <tr>
        <td>February</td>
        <td>10.01.2014</td>
      </tr>
    </table>
  </body>
</html>
Provalo tu stesso »

Risultato

MonthDate
January10.01.2014
February10.01.2014

Nell'esempio illustrato, utilizziamo il tag <table> per creare una tabella. Poi usiamo il tag <tr> per dividere la tabella in righe. Il tag <th> viene usato per le celle di intestazione della tabella, dove si scrive il titolo. In altre parole, la riga della tabella è divisa in intestazioni. Il tag <td> viene usato per le celle della tabella in cui vengono scritte le informazioni.

Raggruppare le righe con <thead>, <tbody> e <tfoot>

Per tabelle più grandi, puoi raggruppare le righe in una sezione di intestazione, una sezione corpo e una sezione piè di pagina usando gli elementi <thead>, <tbody> e <tfoot>. Questo rende il markup più leggibile, ti permette di stilizzare ogni sezione in modo indipendente con CSS e aiuta i browser a ripetere l'intestazione e il piè di pagina quando una tabella lunga viene stampata su più pagine.

Esempio di raggruppamento delle righe di una tabella:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table style="width:80%;">
      <thead>
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>January</td>
          <td>$100</td>
        </tr>
        <tr>
          <td>February</td>
          <td>$80</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>Total</td>
          <td>$180</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

Accessibilità: intestazioni e didascalie

Le tabelle possono risultare difficili da seguire per chi utilizza lettori di schermo, perché una cella da sola ("$80") non ha significato senza sapere a quale riga e colonna appartiene. Alcune semplici pratiche rendono le tabelle comprensibili a tutti.

Contrassegna le celle di intestazione con <th>. Una cella <th> viene annunciata come intestazione e i lettori di schermo la usano per etichettare le celle di dati sottostanti o accanto a essa. Usare <td> per le intestazioni — o falsificare le intestazioni con testo <td> in grassetto — rimuove questa relazione.

Aggiungi un attributo scope. L'attributo scope indica alle tecnologie assistive se un'intestazione si applica alla propria colonna o alla propria riga. Usa scope="col" per le intestazioni di colonna e scope="row" per le intestazioni di riga. Questo è particolarmente importante quando una tabella ha intestazioni sia nella parte superiore che in quella sinistra.

Esempio di intestazioni con l'attributo scope:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table style="width:80%;">
      <caption>Monthly savings</caption>
      <tr>
        <th scope="col">Month</th>
        <th scope="col">Savings</th>
      </tr>
      <tr>
        <th scope="row">January</th>
        <td>$100</td>
      </tr>
      <tr>
        <th scope="row">February</th>
        <td>$80</td>
      </tr>
    </table>
  </body>
</html>

Assegna alla tabella un elemento <caption>. Un <caption> è un titolo per l'intera tabella. È il primo figlio dell'elemento <table> e viene annunciato prima del contenuto della tabella, così chi usa un lettore di schermo sa di cosa tratta la tabella prima di navigarla. Per impostazione predefinita viene visualizzato nella parte superiore della tabella; puoi spostarlo con la proprietà CSS caption-side.

Esempio di tabella con <caption>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
      caption {
        font-weight: bold;
        padding: 8px;
      }
    </style>
  </head>
  <body>
    <table style="width:80%;">
      <caption>Delivery schedule</caption>
      <tr>
        <th scope="col">Month</th>
        <th scope="col">Date</th>
      </tr>
      <tr>
        <td>January</td>
        <td>10.01.2014</td>
      </tr>
      <tr>
        <td>February</td>
        <td>10.02.2014</td>
      </tr>
    </table>
  </body>
</html>

Estensione su più righe e colonne

È possibile estendere una cella su più righe o colonne. Normalmente una cella non può occupare lo spazio sopra, sotto o accanto a un'altra cella, ma gli attributi colspan e rowspan permettono a una cella di occupare l'area di più celle.

Se vuoi che un'unica intestazione si estenda su due o più colonne, usa l'attributo colspan sulla cella con il numero di colonne che deve coprire.

Esempio del tag HTML <table> con l'attributo colspan:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table style="width:80%;">
      <tr>
        <th colspan="2">Month and Date</th>
      </tr>
      <tr>
        <td>January</td>
        <td>10.01.2014</td>
      </tr>
      <tr>
        <td>February</td>
        <td>10.01.2014</td>
      </tr>
    </table>
  </body>
</html>
Provalo tu stesso »

Risultato

Month and Date
January10.01.2014
February10.01.2014

Qui l'unica intestazione <th colspan="2"> si trova sopra entrambe le colonne Month e Date.

Lo stesso si può fare con le righe, usando l'attributo rowspan. Una cella con rowspan="2" si estende verso il basso nella riga sottostante, quindi la riga successiva ha bisogno di una cella in meno. Questo è utile quando un valore si applica a più righe consecutive.

Esempio del tag HTML <table> con l'attributo rowspan:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table style="width:80%;">
      <tr>
        <th>Month</th>
        <th>Date</th>
      </tr>
      <tr>
        <td>January</td>
        <td rowspan="2">10.01.2014</td>
      </tr>
      <tr>
        <td>February</td>
      </tr>
    </table>
  </body>
</html>
Provalo tu stesso »

Risultato

MonthDate
January10.01.2014
February(condivide la cella precedente)

In questo esempio, la cella 10.01.2014 usa rowspan="2", quindi si estende sia sulla riga di January che su quella di February, e la riga di February ha bisogno solo della cella Month.

Tag correlati

  • <table> — il contenitore della tabella
  • <tr> — una riga della tabella
  • <th> — una cella di intestazione
  • <td> — una cella di dati
  • <caption> — il titolo della tabella
  • <colgroup> — raggruppa le colonne per la stilizzazione

Esercitazione

Pratica
Quale attributo su una cella di intestazione indica ai lettori di schermo che l'intestazione etichetta la propria colonna?
Quale attributo su una cella di intestazione indica ai lettori di schermo che l'intestazione etichetta la propria colonna?
Pratica
Dove deve essere posizionato l'elemento caption all'interno di una tabella?
Dove deve essere posizionato l'elemento caption all'interno di una tabella?
Was this page helpful?