Quando usare questo esempio
Le tabelle vanno usate per dati tabellari, non per creare colonne grafiche.
Codice HTML5 commentato
Osserva la struttura e prova a riconoscere il ruolo dei tag prima di copiarla.
<table>
<caption>Listino corsi web</caption>
<thead>
<tr>
<th>Corso</th>
<th>Durata</th>
<th>Prezzo</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML5 base</td>
<td>8 ore</td>
<td>120 €</td>
</tr>
<tr>
<td>CSS3 base</td>
<td>10 ore</td>
<td>150 €</td>
</tr>
</tbody>
</table>Commento didattico
La pagina è organizzata in blocchi riconoscibili: un contenitore principale, titoli ordinati e contenuti raggruppati per argomento. Questo permette di applicare il CSS senza dover riscrivere la struttura HTML.
Gli elementi semantici non servono a “colorare” la pagina: aiutano a spiegare che cosa rappresenta ogni parte del documento.
Da ricordare: se un blocco ha un significato autonomo, valuta
article; se è solo una sezione tematica della pagina, usa section.Varianti possibili
- Usa `caption` per spiegare il contenuto della tabella.
- Non inserire paragrafi lunghi dentro celle molto strette.
Come trasformarlo in esercizio
Cambia il tema, sostituisci i contenuti fittizi con contenuti reali e aggiungi almeno un controllo di accessibilità: testi alternativi, label o link descrittivi.
Continua gli esempi
Confronta questo modello con gli altri esempi e prova a combinarne le parti utili.