Obiettivo
Imparare a usare intestazioni, righe e celle senza trasformare la tabella in un semplice layout grafico.
Traccia
Costruisci una tabella HTML leggibile con giorni, orari, argomenti e docente.
Requisiti richiesti
- Usa
table,caption,thead,tbody,tr,thetd. - Inserisci una didascalia con
caption. - Usa
thper le intestazioni di colonna. - Controlla che ogni riga abbia lo stesso numero di celle.
Consiglio: prima scrivi il contenuto in modo semplice, poi controlla la gerarchia dei titoli e solo alla fine pensa alla grafica.
Procedura guidata
- Crea un nuovo file con nome chiaro, ad esempio
03-tabella-orari.html. - Inserisci la struttura base del documento o lavora dentro il
mainse il layout è già pronto. - Aggiungi titoli, paragrafi, liste, immagini o form richiesti dalla traccia.
- Apri il file nel browser e verifica che i contenuti siano nell’ordine corretto.
- Valida il codice e correggi eventuali tag non chiusi o attributi mancanti.
Base di partenza
Il codice seguente non è l’unica soluzione possibile: usalo come riferimento e personalizzalo.
<table>
<caption>Calendario del laboratorio HTML5</caption>
<thead>
<tr>
<th>Giorno</th>
<th>Orario</th>
<th>Argomento</th>
<th>Docente</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lunedì</td>
<td>15:00 - 17:00</td>
<td>Struttura base</td>
<td>R. Bianchi</td>
</tr>
<tr>
<td>Mercoledì</td>
<td>15:00 - 17:00</td>
<td>Form e tabelle</td>
<td>R. Bianchi</td>
</tr>
</tbody>
</table>Checklist di controllo
- ✓Semantica: i tag descrivono il ruolo reale dei contenuti.
- ✓Accessibilità: immagini, form e link sono comprensibili anche fuori dal contesto visivo.
- ✓Ordine: c’è un solo
h1e i titoli non saltano livello senza motivo. - ✓Percorsi: link, immagini e file collegati usano nomi corretti.
Continua gli esercizi
Passa alla traccia precedente o successiva mantenendo lo stesso metodo: struttura, controllo, miglioramento.