Obiettivo
Capire come migliorare dati tabellari senza trasformarli in layout impropri.
Questo esercizio è pensato per essere svolto in modo incrementale: prima struttura HTML, poi regole generali, infine dettagli responsive e rifiniture.
Requisiti della traccia
- Tabella con almeno quattro colonne.
- Intestazione evidenziata.
- Righe alternate.
- Contenitore con scroll orizzontale sui dispositivi piccoli.
Procedura consigliata
- Usa la tabella solo per dati, non per impaginare la pagina.
- Aggiungi `border-collapse: collapse`.
- Non ridurre troppo il font su mobile: meglio lo scroll orizzontale.
- Allinea numeri e testi in modo coerente.
Commento: lavora sempre su una copia del file. In CSS è più facile capire un errore se modifichi una proprietà alla volta e controlli subito il risultato nel browser.
Base HTML commentata
Puoi partire da questa struttura e completarla con contenuti reali.
<div class="table-wrap">
<table class="data-table">
<thead><tr><th>Corso</th><th>Durata</th><th>Livello</th><th>Stato</th></tr></thead>
<tbody><tr><td>CSS base</td><td>4 ore</td><td>Base</td><td>Attivo</td></tr></tbody>
</table>
</div>
CSS di partenza commentato
Le regole seguenti non sono una soluzione unica: servono come base ragionata da adattare al tuo progetto.
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.data-table th,
.data-table td { padding: 12px 14px; border-bottom: 1px solid #e2e8f0; text-align: left; }
.data-table thead { background: #eaf1ff; }
.data-table tbody tr:nth-child(even) { background: #f8fafc; }
Controllo finale
- La pagina resta leggibile su smartphone?
- I nomi delle classi descrivono davvero il contenuto?
- Il componente può essere riutilizzato in un’altra pagina?
- Hover e focus sono visibili ma non invadenti?
Continua con gli esercizi
Procedi con la traccia successiva oppure torna all’indice degli esercizi.