Tabelle HTML: quando usarle e come strutturarle

Obiettivo della lezione

Creare tabelle per dati tabellari usando intestazioni, righe e celle in modo corretto.

Spiegazione

Le tabelle servono per dati organizzati in righe e colonne: orari, listini, confronti, calendari. Non devono essere usate per impaginare l’intero sito, una pratica vecchia e poco accessibile.

Una tabella chiara usa thead, tbody, th e td.

Idea chiave: in HTML devi scegliere il tag in base al significato del contenuto. La grafica verrà gestita in seguito con CSS.

Codice di esempio

Studia il blocco seguente e prova a copiarlo in un file HTML, modificando testi e contenuti.

<table>
  <thead>
    <tr><th>Giorno</th><th>Orario</th></tr>
  </thead>
  <tbody>
    <tr><td>Lunedì</td><td>18:00</td></tr>
  </tbody>
</table>

Errori comuni

Usare tabelle per creare colonne grafiche.
Non distinguere intestazioni e celle dati.
Creare tabelle troppo larghe per lo schermo mobile.

Esercizio pratico

Crea una nuova pagina partendo dalla struttura base. Applica l’argomento di questa lezione a un contenuto reale: una pagina corso, una scheda personale o una piccola pagina informativa.

Apri il tuo editor.
Crea o aggiorna un file .html o .asp.
Inserisci il codice della lezione.
Modifica testi e attributi.
Apri la pagina nel browser e controlla il risultato.

Lezioni collegate

Continua il laboratorio

Procedi con la lezione successiva oppure passa agli esercizi per consolidare subito i concetti.

Precedente Successiva