▧ Tabelle

Tabella orari

Costruisci una tabella HTML leggibile con giorni, orari, argomenti e docente.

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, th e td.
  • Inserisci una didascalia con caption.
  • Usa th per 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

  1. Crea un nuovo file con nome chiaro, ad esempio 03-tabella-orari.html.
  2. Inserisci la struttura base del documento o lavora dentro il main se il layout è già pronto.
  3. Aggiungi titoli, paragrafi, liste, immagini o form richiesti dalla traccia.
  4. Apri il file nel browser e verifica che i contenuti siano nell’ordine corretto.
  5. 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 h1 e 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.