Lezione 15 · Dati

Tabelle leggibili

Rendere tabelle più ordinate, responsive e facili da consultare.

Obiettivo della lezione

In questa lezione impari a usare CSS in modo pratico, ragionando su un problema reale di impaginazione. Non basta memorizzare proprietà: serve capire dove applicarle, come organizzarle e come evitare conflitti.

Il risultato atteso è una regola chiara, leggibile e riutilizzabile in altre pagine del sito.

Spiegazione pratica

Rendere tabelle più ordinate, responsive e facili da consultare. La regola CSS deve essere collegata a una struttura HTML ordinata: classi significative, sezioni riconoscibili e nomi coerenti rendono più semplice modificare il progetto nel tempo.

Quando lavori su una pagina, controlla sempre tre aspetti: leggibilità, coerenza visiva e comportamento su schermi piccoli.

/* Esempio 15: Tabelle leggibili */ .sezione-15 { padding: 24px; border-radius: 18px; background: var(--primary-soft); } .sezione-15 h2 { margin: 0 0 12px; color: var(--primary-dark); }
Nota didattica: prova a modificare un valore alla volta. In CSS molti problemi nascono da troppe modifiche simultanee.

Errori comuni

  • Usare selettori troppo generici e modificare elementi non desiderati.
  • Dimenticare la precedenza tra regole, classi e id.
  • Non verificare il risultato su smartphone.
  • Duplicare codice invece di creare classi riutilizzabili.

Esercizio

Crea una piccola sezione HTML con titolo, testo e pulsante. Applica una classe principale, aggiungi spaziatura, sfondo, bordo arrotondato e una variante responsive.

Controlla che il testo resti leggibile e che il componente possa essere riutilizzato in una pagina diversa.

Continua il percorso

Passa alla lezione successiva oppure torna all'indice per scegliere un altro argomento.

Precedente Successiva