Html Guida

Tabelle HTML Semplificate: Guida Completa alle Tabelle Dati

Impara le tabelle HTML dalle basi alle tecniche avanzate. Padroneggia gli elementi table, tr, td, th, accessibilità, design responsive e quando usare le tabelle correttamente.

September 4, 2025

9 min di lettura

HTML

tabelle

tabelle dati

accessibilità

design responsive

elementi tabella

Quando Usare le Tabelle (e Quando Non Usarle)

Comprendere quando usare le tabelle è cruciale per creare siti web semantici e accessibili.

✅ Quando Usare le Tabelle

Perfette per dati tabulari:

Report finanziari e fogli di calcolo
Grafici di confronto e matrici di funzionalità
Statistiche sportive e tabelloni segnapunti
Orari e programmi
Specifiche di prodotto
Risultati di sondaggi e analisi dati

Esempio di uso appropriato delle tabelle:

<!-- Buono: Visualizzare dati strutturati -->
<table>
  <caption>Report Vendite Trimestrali 2024</caption>
  <thead>
    <tr>
      <th>Trimestre</th>
      <th>Fatturato</th>
      <th>Crescita</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Q1</td>
      <td>€125.000</td>
      <td>+15%</td>
    </tr>
    <tr>
      <td>Q2</td>
      <td>€143.750</td>
      <td>+18%</td>
    </tr>
  </tbody>
</table>

❌ Quando NON Usare le Tabelle

Evita le tabelle per:

Layout di pagina e posizionamento
Creare colonne per contenuto testuale
Solo scopi di stilizzazione
Organizzazione di contenuto non tabellare

Esempio di uso inappropriato delle tabelle:

<!-- Sbagliato: Usare tabelle per il layout -->
<table>
  <tr>
    <td>
      <nav>Navigazione qui</nav>
    </td>
    <td>
      <main>Contenuto principale qui</main>
    </td>
    <td>
      <aside>Sidebar qui</aside>
    </td>
  </tr>
</table>

<!-- Corretto: Usa CSS Grid o Flexbox -->
<div class="layout">
  <nav>Navigazione qui</nav>
  <main>Contenuto principale qui</main>
  <aside>Sidebar qui</aside>
</div>

Basi di `<table>`, `<tr>`, `<td>`, `<th>`

Comprendere gli elementi fondamentali delle tabelle è essenziale per creare tabelle ben strutturate.

Struttura Base della Tabella

<table>
  <tr>
    <th>Intestazione 1</th>
    <th>Intestazione 2</th>
    <th>Intestazione 3</th>
  </tr>
  <tr>
    <td>Dato 1</td>
    <td>Dato 2</td>
    <td>Dato 3</td>
  </tr>
  <tr>
    <td>Dato 4</td>
    <td>Dato 5</td>
    <td>Dato 6</td>
  </tr>
</table>

Elementi Essenziali della Tabella

<table> - L'elemento contenitore per l'intera tabella <tr> - Elemento riga della tabella <th> - Cella intestazione della tabella (automaticamente grassetto e centrato) <td> - Cella dati della tabella

Esempio Completo di Tabella

<table>
  <tr>
    <th>Prodotto</th>
    <th>Prezzo</th>
    <th>Scorte</th>
    <th>Valutazione</th>
  </tr>
  <tr>
    <td>Laptop Pro</td>
    <td>€1.299</td>
    <td>15</td>
    <td>4,8/5</td>
  </tr>
  <tr>
    <td>Mouse Wireless</td>
    <td>€29</td>
    <td>87</td>
    <td>4,5/5</td>
  </tr>
  <tr>
    <td>Hub USB-C</td>
    <td>€79</td>
    <td>23</td>
    <td>4,2/5</td>
  </tr>
</table>

Attributi delle Intestazioni Tabella

Attributo Scope:

<table>
  <tr>
    <th scope="col">Nome</th>
    <th scope="col">Età</th>
    <th scope="col">Città</th>
  </tr>
  <tr>
    <th scope="row">Mario Rossi</th>
    <td>28</td>
    <td>Roma</td>
  </tr>
  <tr>
    <th scope="row">Giulia Bianchi</th>
    <td>34</td>
    <td>Milano</td>
  </tr>
</table>

Aggiungere Didascalie e Riassunti

Didascalie e riassunti migliorano l'accessibilità delle tabelle e forniscono contesto agli utenti.

Didascalia della Tabella

L'elemento <caption> fornisce un titolo o descrizione per la tabella:

<table>
  <caption>Metriche Performance Dipendenti - Q3 2024</caption>
  <tr>
    <th>Dipendente</th>
    <th>Vendite</th>
    <th>Valutazione Cliente</th>
    <th>Obiettivi Raggiunti</th>
  </tr>
  <tr>
    <td>Sara Rossi</td>
    <td>€45.000</td>
    <td>4,9/5</td>
    <td>105%</td>
  </tr>
  <tr>
    <td>Marco Chen</td>
    <td>€38.500</td>
    <td>4,7/5</td>
    <td>98%</td>
  </tr>
</table>

Stilizzare le Didascalie

caption {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: left;
  color: #333;
}

/* Posizionamento didascalia */
caption {
  caption-side: top; /* Default */
  /* caption-side: bottom; */
}

Attributo Summary (Deprecato)

Nota: L'attributo summary è deprecato in HTML5. Usa <caption> o testo circostante invece:

<!-- Vecchio modo (deprecato) -->
<table summary="Questa tabella mostra dati vendite trimestrali">

<!-- Nuovo modo -->
<table>
  <caption>
    Dati Vendite Trimestrali
    <p>Questa tabella visualizza cifre di fatturato e percentuali di crescita per ogni trimestre del 2024</p>
  </caption>
  <!-- contenuto tabella -->
</table>

Unire Celle con Colspan e Rowspan

L'unione delle celle permette di creare layout di tabelle più complessi facendo estendere le celle su più colonne o righe.

Colspan - Estendere le Colonne

<table>
  <tr>
    <th colspan="3">Report Vendite 2024</th>
  </tr>
  <tr>
    <th>Trimestre</th>
    <th>Fatturato</th>
    <th>Crescita</th>
  </tr>
  <tr>
    <td>Q1</td>
    <td>€100.000</td>
    <td>+10%</td>
  </tr>
  <tr>
    <td>Q2</td>
    <td>€120.000</td>
    <td>+20%</td>
  </tr>
  <tr>
    <td colspan="2">Fatturato Totale</td>
    <td>€220.000</td>
  </tr>
</table>

Rowspan - Estendere le Righe

<table>
  <tr>
    <th>Dipartimento</th>
    <th>Dipendente</th>
    <th>Ruolo</th>
    <th>Stipendio</th>
  </tr>
  <tr>
    <td rowspan="3">Ingegneria</td>
    <td>Mario Rossi</td>
    <td>Senior Developer</td>
    <td>€95.000</td>
  </tr>
  <tr>
    <td>Sara Bianchi</td>
    <td>Frontend Developer</td>
    <td>€75.000</td>
  </tr>
  <tr>
    <td>Luca Verdi</td>
    <td>DevOps Engineer</td>
    <td>€85.000</td>
  </tr>
  <tr>
    <td rowspan="2">Marketing</td>
    <td>Lisa Neri</td>
    <td>Marketing Manager</td>
    <td>€70.000</td>
  </tr>
  <tr>
    <td>Tom Gialli</td>
    <td>Content Creator</td>
    <td>€55.000</td>
  </tr>
</table>

Unione Celle Complessa

<table>
  <tr>
    <th colspan="4">Dashboard Performance Aziendale</th>
  </tr>
  <tr>
    <th rowspan="2">Metriche</th>
    <th colspan="3">Trimestri</th>
  </tr>
  <tr>
    <th>Q1</th>
    <th>Q2</th>
    <th>Q3</th>
  </tr>
  <tr>
    <td>Fatturato</td>
    <td>€150K</td>
    <td>€175K</td>
    <td>€200K</td>
  </tr>
  <tr>
    <td>Profitto</td>
    <td>€45K</td>
    <td>€52K</td>
    <td>€65K</td>
  </tr>
</table>

Struttura Avanzata delle Tabelle

Per tabelle complesse, usa elementi semantici per migliorare struttura e accessibilità.

Sezioni Tabella: `<thead>`, `<tbody>`, `<tfoot>`

<table>
  <caption>Riassunto Finanziario Annuale</caption>
  
  <thead>
    <tr>
      <th scope="col">Categoria</th>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
      <th scope="col">Q3</th>
      <th scope="col">Q4</th>
      <th scope="col">Totale</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <th scope="row">Fatturato</th>
      <td>€125.000</td>
      <td>€143.750</td>
      <td>€165.313</td>
      <td>€190.110</td>
      <td>€624.173</td>
    </tr>
    <tr>
      <th scope="row">Spese</th>
      <td>€87.500</td>
      <td>€100.625</td>
      <td>€115.719</td>
      <td>€133.077</td>
      <td>€436.921</td>
    </tr>
    <tr>
      <th scope="row">Profitto</th>
      <td>€37.500</td>
      <td>€43.125</td>
      <td>€49.594</td>
      <td>€57.033</td>
      <td>€187.252</td>
    </tr>
  </tbody>
  
  <tfoot>
    <tr>
      <th scope="row">Margine Profitto</th>
      <td>30%</td>
      <td>30%</td>
      <td>30%</td>
      <td>30%</td>
      <td>30%</td>
    </tr>
  </tfoot>
</table>

Gruppi Colonne: `<colgroup>` e `<col>`

<table>
  <caption>Confronto Prodotti</caption>
  
  <colgroup>
    <col>
    <col span="2" class="price-columns">
    <col class="rating-column">
  </colgroup>
  
  <thead>
    <tr>
      <th>Prodotto</th>
      <th>Prezzo Normale</th>
      <th>Prezzo Scontato</th>
      <th>Valutazione</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>€999</td>
      <td>€799</td>
      <td>4,5/5</td>
    </tr>
    <tr>
      <td>Tablet</td>
      <td>€599</td>
      <td>€499</td>
      <td>4,2/5</td>
    </tr>
  </tbody>
</table>

.price-columns {
  background-color: #f0f8ff;
}

.rating-column {
  background-color: #fff8dc;
  text-align: center;
}

Accessibilità nelle Tabelle

Rendere le tabelle accessibili assicura che tutti gli utenti possano comprendere e navigare i tuoi dati efficacemente.

Funzionalità di Accessibilità Essenziali

1. Usa le Intestazioni Tabella Correttamente:

<table>
  <tr>
    <th scope="col">Nome</th>
    <th scope="col">Dipartimento</th>
    <th scope="col">Stipendio</th>
  </tr>
  <tr>
    <th scope="row">Mario Rossi</th>
    <td>Ingegneria</td>
    <td>€75.000</td>
  </tr>
</table>

2. Fornisci Didascalie Chiare:

<table>
  <caption>
    Informazioni Stipendi Dipendenti
    <span class="sr-only">
      Questa tabella contiene nomi dipendenti, dipartimenti e informazioni stipendio
    </span>
  </caption>
  <!-- contenuto tabella -->
</table>

3. Usa Etichette ARIA Quando Necessario:

<table aria-label="Ripartizione budget mensile">
  <tr>
    <th id="category">Categoria</th>
    <th id="budgeted">Preventivato</th>
    <th id="actual">Effettivo</th>
    <th id="difference">Differenza</th>
  </tr>
  <tr>
    <td headers="category">Abitazione</td>
    <td headers="budgeted">€1.200</td>
    <td headers="actual">€1.150</td>
    <td headers="difference">-€50</td>
  </tr>
</table>

Accessibilità Tabelle Complesse

Per tabelle con livelli multipli di intestazioni:

<table>
  <caption>Dati Vendite per Regione e Trimestre</caption>
  <thead>
    <tr>
      <th rowspan="2" id="region">Regione</th>
      <th colspan="4" id="quarters">Trimestri 2024</th>
    </tr>
    <tr>
      <th id="q1" headers="quarters">Q1</th>
      <th id="q2" headers="quarters">Q2</th>
      <th id="q3" headers="quarters">Q3</th>
      <th id="q4" headers="quarters">Q4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="north" headers="region">Nord</th>
      <td headers="north q1">€125K</td>
      <td headers="north q2">€143K</td>
      <td headers="north q3">€165K</td>
      <td headers="north q4">€190K</td>
    </tr>
    <tr>
      <th id="south" headers="region">Sud</th>
      <td headers="south q1">€98K</td>
      <td headers="south q2">€112K</td>
      <td headers="south q3">€128K</td>
      <td headers="south q4">€145K</td>
    </tr>
  </tbody>
</table>

Considerazioni per Lettori di Schermo

/* Testo solo per lettori di schermo */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Salta navigazione tabella */
.skip-table {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-table:focus {
  position: static;
  width: auto;
  height: auto;
}

Stilizzare le Tabelle con CSS

Trasforma tabelle HTML di base in visualizzazioni dati visivamente accattivanti e professionali.

Stilizzazione Base delle Tabelle

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-family: Arial, sans-serif;
}

th, td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #f8f9fa;
  font-weight: 600;
  color: #333;
  text-transform: uppercase;
  font-size: 0.9em;
  letter-spacing: 0.5px;
}

tr:hover {
  background-color: #f5f5f5;
}

/* Colori righe alternate */
tr:nth-child(even) {
  background-color: #f9f9f9;
}

Design Tabella Moderno

.modern-table {
  width: 100%;
  border-collapse: collapse;
  margin: 25px 0;
  font-size: 0.9em;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  min-width: 400px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.modern-table thead tr {
  background-color: #009879;
  color: #ffffff;
  text-align: left;
}

.modern-table th,
.modern-table td {
  padding: 12px 15px;
}

.modern-table tbody tr {
  border-bottom: 1px solid #dddddd;
}

.modern-table tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

.modern-table tbody tr:last-of-type {
  border-bottom: 2px solid #009879;
}

.modern-table tbody tr:hover {
  background-color: #f1f1f1;
  transform: scale(1.02);
  transition: all 0.3s ease;
}

Design Tabella Responsive

.responsive-table {
  width: 100%;
  border-collapse: collapse;
}

@media screen and (max-width: 768px) {
  .responsive-table {
    border: 0;
  }

  .responsive-table caption {
    font-size: 1.3em;
  }
  
  .responsive-table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  .responsive-table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: 10px;
  }
  
  .responsive-table td {
    border: none;
    border-bottom: 1px solid #eee;
    display: block;
    font-size: 0.8em;
    text-align: right;
    padding-left: 50%;
    position: relative;
  }
  
  .responsive-table td:before {
    content: attr(data-label);
    position: absolute;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    font-weight: bold;
    text-align: left;
  }
}

<table class="responsive-table">
  <thead>
    <tr>
      <th>Nome</th>
      <th>Posizione</th>
      <th>Ufficio</th>
      <th>Stipendio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Nome">Mario Rossi</td>
      <td data-label="Posizione">Developer</td>
      <td data-label="Ufficio">Roma</td>
      <td data-label="Stipendio">€75.000</td>
    </tr>
  </tbody>
</table>

Tabella con Pulsanti Azione

.action-table {
  width: 100%;
  border-collapse: collapse;
}

.action-table th,
.action-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8em;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s;
}

.btn-edit {
  background-color: #007bff;
  color: white;
}

.btn-edit:hover {
  background-color: #0056b3;
}

.btn-delete {
  background-color: #dc3545;
  color: white;
}

.btn-delete:hover {
  background-color: #c82333;
}

<table class="action-table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Nome</th>
      <th>Email</th>
      <th>Azioni</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>Mario Rossi</td>
      <td>mario@esempio.com</td>
      <td>
        <div class="action-buttons">
          <a href="#" class="btn btn-edit">Modifica</a>
          <button class="btn btn-delete">Elimina</button>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Errori Comuni con le Tabelle da Evitare

1. Usare Tabelle per il Layout

<!-- Sbagliato: Tabella per layout pagina -->
<table>
  <tr>
    <td>Intestazione</td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td>Sidebar</td>
          <td>Contenuto</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<!-- Corretto: CSS Grid per layout -->
<div class="page-layout">
  <header>Intestazione</header>
  <aside>Sidebar</aside>
  <main>Contenuto</main>
</div>

2. Intestazioni Tabella Mancanti

<!-- Sbagliato: Nessuna intestazione -->
<table>
  <tr>
    <td>Nome</td>
    <td>Età</td>
    <td>Città</td>
  </tr>
  <tr>
    <td>Mario</td>
    <td>25</td>
    <td>Roma</td>
  </tr>
</table>

<!-- Corretto: Intestazioni appropriate -->
<table>
  <tr>
    <th>Nome</th>
    <th>Età</th>
    <th>Città</th>
  </tr>
  <tr>
    <td>Mario</td>
    <td>25</td>
    <td>Roma</td>
  </tr>
</table>

3. Struttura Celle Inconsistente

<!-- Sbagliato: Colonne inconsistenti -->
<table>
  <tr>
    <th>Nome</th>
    <th>Età</th>
  </tr>
  <tr>
    <td>Mario</td>
    <td>25</td>
    <td>Cella extra</td> <!-- Questo rompe la struttura -->
  </tr>
</table>

<!-- Corretto: Struttura consistente -->
<table>
  <tr>
    <th>Nome</th>
    <th>Età</th>
    <th>Note</th>
  </tr>
  <tr>
    <td>Mario</td>
    <td>25</td>
    <td>Nuovo dipendente</td>
  </tr>
</table>

4. Esperienza Mobile Scadente

<!-- Sbagliato: Nessuna considerazione mobile -->
<table style="width: 1200px;">
  <!-- Tabella molto larga con molte colonne -->
</table>

<!-- Corretto: Approccio responsive -->
<div class="table-container">
  <table class="responsive-table">
    <!-- Tabella con design mobile-friendly -->
  </table>
</div>

Tecniche Avanzate per le Tabelle

Tabelle Ordinabili

<table class="sortable-table">
  <thead>
    <tr>
      <th data-sort="string">Nome <span class="sort-arrow">↕</span></th>
      <th data-sort="number">Età <span class="sort-arrow">↕</span></th>
      <th data-sort="number">Stipendio <span class="sort-arrow">↕</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mario Rossi</td>
      <td>28</td>
      <td>75000</td>
    </tr>
    <tr>
      <td>Giulia Bianchi</td>
      <td>34</td>
      <td>85000</td>
    </tr>
  </tbody>
</table>

Tabelle Filtrabili

<div class="table-controls">
  <input type="text" id="table-filter" placeholder="Filtra tabella...">
</div>

<table class="filterable-table">
  <thead>
    <tr>
      <th>Prodotto</th>
      <th>Categoria</th>
      <th>Prezzo</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>Elettronica</td>
      <td>€999</td>
    </tr>
    <tr>
      <td>Sedia da Scrivania</td>
      <td>Mobili</td>
      <td>€299</td>
    </tr>
  </tbody>
</table>

Righe Espandibili

<table class="expandable-table">
  <thead>
    <tr>
      <th></th>
      <th>ID Ordine</th>
      <th>Cliente</th>
      <th>Totale</th>
    </tr>
  </thead>
  <tbody>
    <tr class="expandable-row">
      <td><button class="expand-btn">+</button></td>
      <td>#12345</td>
      <td>Mario Rossi</td>
      <td>€299,99</td>
    </tr>
    <tr class="detail-row" style="display: none;">
      <td colspan="4">
        <div class="order-details">
          <p><strong>Articoli:</strong> Laptop, Mouse, Tastiera</p>
          <p><strong>Spedizione:</strong> Consegna Espressa</p>
          <p><strong>Stato:</strong> In Elaborazione</p>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Riassunto delle Migliori Pratiche

Usa le tabelle solo per dati tabulari, non per il layout
Includi sempre intestazioni tabella appropriate con attributi scope
Fornisci didascalie significative per il contesto
Assicura l'accessibilità con etichette ARIA e markup appropriato
Progetta per mobile con tecniche responsive
Mantieni le tabelle semplici ed evita complessità non necessarie
Usa elementi semantici come thead, tbody e tfoot
Testa con lettori di schermo per verificare l'accessibilità
Stilizza con CSS, non attributi HTML deprecati
Considera le prestazioni per grandi set di dati

Conclusione

Le tabelle HTML sono strumenti potenti per presentare dati strutturati quando utilizzate correttamente. Comprendendo il markup appropriato delle tabelle, i requisiti di accessibilità e le tecniche di design responsive, puoi creare tabelle che sono sia funzionali che user-friendly su tutti i dispositivi e tecnologie assistive.

Ricorda che le tabelle dovrebbero migliorare la comprensione dei dati, non complicarla. Concentrati su struttura chiara, intestazioni significative e design accessibile per creare tabelle che servano efficacemente tutti i tuoi utenti.

Inizia a implementare queste tecniche per le tabelle nei tuoi progetti, e creerai presentazioni dati più professionali, accessibili e user-friendly che funzionano magnificamente su tutte le piattaforme e dispositivi.