Tabelle e Dati

Bentornato.

Nella lezione precedente hai imparato ad aggiungere immagini e media alle tue pagine.

Ora entriamo nel mondo delle tabelle.

Le tabelle sono utili.

Le tabelle sono potenti.

Le tabelle vengono anche spesso abusate come se qualcuno avesse trovato un martello e deciso che ogni problema è un chiodo.

Quindi oggi impariamo il modo corretto.

Le tabelle sono per i dati.

Non per il layout.

Non per allineare pulsanti.

Non per costruire un intero sito come se fosse il 1999 e internet profumasse ancora di modem.

Cosa Imparerai

In questa lezione imparerai:

• a cosa servono le tabelle HTML;
• come usare table;
• come creare righe con tr;
• come creare celle di intestazione con th;
• come creare celle dati con td;
• come aggiungere una caption;
• come usare thead, tbody e tfoot;
• perché le tabelle non devono essere usate per il layout della pagina;
• come rendere le tabelle più chiare e significative.

Che Cos’è una Tabella?

Una tabella serve a mostrare dati strutturati.

Per esempio:

• prezzi;
• orari;
• statistiche;
• dati di confronto;
• fatture;
• liste di prodotti;
• piani di lezione;
• risultati.

Una tabella ha righe e colonne.

Come un foglio di calcolo.

Ma in HTML.

E senza le formule terrificanti nascoste nella cella F37.

Una Tabella Base

Ecco una tabella semplice:

<table>
  <tr>
    <th>Nome</th>
    <th>Ruolo</th>
  </tr>
  <tr>
    <td>Viktor</td>
    <td>Web Developer</td>
  </tr>
  <tr>
    <td>Anna</td>
    <td>Designer</td>
  </tr>
</table>

Questa crea una tabella con:

• una riga di intestazione;
• due righe di dati;
• due colonne.

Il browser capisce che si tratta di dati strutturati.

Non testo casuale che finge di essere organizzato.

L’Elemento table

L’intera tabella inizia con:

<table>

E finisce con:

</table>

Tutto ciò che è dentro la tabella appartiene alla tabella.

Righe.

Intestazioni.

Celle.

Caption.

La tabella è il contenitore.

La grande scatola.

La valigia digitale dei dati.

Righe della Tabella con tr

Ogni riga si crea con tr.

Esempio:

<tr>
  <td>HTML</td>
  <td>Principiante</td>
</tr>

tr significa table row.

Una riga va in orizzontale.

Così:

HTML | Principiante

Una tabella si costruisce riga per riga.

Non colonna per colonna.

All’inizio sembra strano.

Poi il cervello lo accetta.

Alla fine.

Celle di Intestazione con th

Le celle di intestazione usano th.

Esempio:

<th>Corso</th>
<th>Livello</th>

Le celle di intestazione descrivono cosa significano i dati.

Esempio:

<tr>
  <th>Corso</th>
  <th>Livello</th>
</tr>

Questo dice al browser:

Queste celle sono intestazioni per i dati della tabella.

I browser di solito mostrano th in grassetto e centrato.

Ma ancora una volta, il significato è più importante dello stile.

HTML non è solo decorazione.

HTML è significato con parentesi angolari.

Celle Dati con td

Le celle normali della tabella usano td.

Esempio:

<td>HTML</td>
<td>Principiante</td>

td significa table data.

Una riga con dati appare così:

<tr>
  <td>HTML</td>
  <td>Principiante</td>
</tr>

Usa td per i dati veri.

Usa th per le intestazioni.

Non mischiarli a caso come calzini dopo il bucato.

Aggiungere una Caption

Una tabella può avere una caption.

Esempio:

<table>
  <caption>Livelli dei Corsi</caption>
  <tr>
    <th>Corso</th>
    <th>Livello</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>Principiante</td>
  </tr>
</table>

La caption descrive la tabella.

Deve essere messa subito dopo il tag di apertura table.

Una buona caption aiuta gli utenti a capire di cosa parla la tabella.

È molto utile per l’accessibilità.

E anche per gli umani che non amano i giochi d’indovinello.

Una Struttura Migliore per le Tabelle

Per tabelle più grandi, HTML ci dà:

• thead;
• tbody;
• tfoot.

Esempio:

<table>
  <caption>Spese Mensili</caption>

  <thead>
    <tr>
      <th>Voce</th>
      <th>Costo</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Hosting</td>
      <td>€10</td>
    </tr>
    <tr>
      <td>Dominio</td>
      <td>€12</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th>Totale</th>
      <td>€22</td>
    </tr>
  </tfoot>
</table>

Questa struttura rende la tabella più chiara.

La tabella ha:

• un’area di intestazione;
• un’area principale;
• un’area finale.

Molto organizzato.

Quasi sospettosamente organizzato.

thead

L’elemento thead contiene la sezione di intestazione della tabella.

Esempio:

<thead>
  <tr>
    <th>Prodotto</th>
    <th>Prezzo</th>
  </tr>
</thead>

Qui di solito vanno le intestazioni delle colonne.

Aiuta browser, screen reader e sviluppatori a capire la struttura della tabella.

Aiuta anche il tuo te stesso futuro.

Il te stesso futuro apprezza il codice pulito.

Il te stesso futuro è stanco.

tbody

L’elemento tbody contiene i dati principali della tabella.

Esempio:

<tbody>
  <tr>
    <td>Laptop</td>
    <td>€800</td>
  </tr>
  <tr>
    <td>Mouse</td>
    <td>€20</td>
  </tr>
</tbody>

Qui vive la maggior parte delle righe.

Se la tabella fosse un panino, tbody sarebbe il ripieno.

La parte utile.

Il motivo per cui siamo qui.

tfoot

L’elemento tfoot contiene informazioni finali.

Esempio:

<tfoot>
  <tr>
    <th>Totale</th>
    <td>€820</td>
  </tr>
</tfoot>

Usalo per totali, riassunti o informazioni finali della tabella.

Non tutte le tabelle hanno bisogno di tfoot.

Usalo quando aiuta.

Non aggiungere tag solo perché sembrano professionali.

È così che i siti diventano minestrone.

Crea una Pagina di Pratica

Crea un nuovo file:

touch tables.html

Aggiungi questo:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pratica Tabelle</title>
</head>
<body>
  <h1>Pratica Tabelle</h1>

  <p>Questa pagina mostra una semplice tabella con informazioni sui corsi.</p>

  <table>
    <caption>Piano del Corso</caption>

    <thead>
      <tr>
        <th>Lezione</th>
        <th>Argomento</th>
        <th>Stato</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>1</td>
        <td>Primi Passi</td>
        <td>Completata</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Struttura HTML</td>
        <td>Completata</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Testo e Titoli</td>
        <td>Completata</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Aprilo nel browser.

Sembrerà semplice.

È normale.

HTML crea la struttura.

CSS lo renderà bello più avanti.

Per ora la tabella è viva.

Semplice, ma viva.

Non Usare le Tabelle per il Layout

Questo è importante.

Le tabelle non devono essere usate per costruire il layout della pagina.

Cattiva idea:

<table>
  <tr>
    <td>Sidebar</td>
    <td>Contenuto Principale</td>
  </tr>
</table>

Una volta era comune.

Ma oggi usiamo CSS per il layout.

Le tabelle sono per i dati.

CSS è per il layout.

Non far trasportare mobili alle tabelle.

Non sono camion da trasloco.

Quando Usare una Tabella

Usa una tabella quando il contenuto ha righe e colonne chiare.

Buon uso di tabella:

Prodotto | Prezzo | Quantità
Laptop   | €800   | 1
Mouse    | €20    | 2

Non buon uso di tabella:

Header | Area principale | Footer

Questo è layout.

Usa CSS più avanti.

Sii severo qui.

I progetti futuri ti ringrazieranno.

Accessibilità delle Tabelle

Le tabelle devono essere chiare per tutti.

Usa:

• intestazioni significative;
• caption;
• struttura semplice;
• organizzazione logica di righe e colonne.

Esempio:

<table>
  <caption>Programma Settimanale di Allenamento</caption>
  <thead>
    <tr>
      <th>Giorno</th>
      <th>Attività</th>
      <th>Ora</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lunedì</td>
      <td>Karate</td>
      <td>19:00</td>
    </tr>
    <tr>
      <td>Mercoledì</td>
      <td>Yoga</td>
      <td>18:30</td>
    </tr>
  </tbody>
</table>

Questa è leggibile.

Questa ha significato.

Questa non fa piangere il browser in silenzio.

Errori Comuni

Dimenticare tr

Sbagliato:

<table>
  <td>HTML</td>
  <td>Principiante</td>
</table>

Corretto:

<table>
  <tr>
    <td>HTML</td>
    <td>Principiante</td>
  </tr>
</table>

Le celle devono stare dentro le righe.

Le righe devono stare dentro la tabella.

La gerarchia conta.

HTML non è un mucchio di bucato.

Usare td per le Intestazioni

Non ideale:

<tr>
  <td>Nome</td>
  <td>Email</td>
</tr>

Meglio:

<tr>
  <th>Nome</th>
  <th>Email</th>
</tr>

Se è un’intestazione, usa th.

Troppi Dati

Una tabella gigante può essere difficile da leggere.

Non creare una tabella con 40 colonne e poi stupirti se gli utenti soffrono.

Se la tabella diventa troppo grande, pensa a dividerla.

O a organizzare i dati in modo diverso.

A volte la tabella migliore è una tabella più piccola.

Come la pizza.

Pezzi più piccoli sono più facili da sopravvivere.

Pratica

Crea una pagina chiamata:

schedule.html

Costruisci una tabella per un programma settimanale.

Deve includere:

• un h1;
• un paragrafo introduttivo;
• una tabella;
• una caption;
• thead;
• tbody;
• almeno cinque righe;
• colonne per giorno, attività e ora.

Niente CSS.

Niente JavaScript.

Solo struttura HTML della tabella.

Mini Sfida

Crea un file:

price-list.html

Costruisci una tabella prezzi.

Deve includere:

• title della pagina;
• un titolo principale;
• un breve paragrafo;
• una caption;
• colonne per servizio, descrizione e prezzo;
• almeno quattro servizi;
• una riga finale con una nota o un totale.

Esempi di servizi:

• landing page;
• sito portfolio;
• sito business;
• manutenzione sito.

Mantienila pulita.

Niente trucchi di layout.

Le tabelle sono per i dati.

Le stiamo osservando attentamente.

Riassunto

Oggi hai imparato che:

• le tabelle sono per dati strutturati;
• table crea una tabella;
• tr crea una riga;
• th crea una cella di intestazione;
• td crea una cella dati;
• caption descrive la tabella;
• thead raggruppa le righe di intestazione;
• tbody raggruppa le righe principali;
• tfoot raggruppa le righe finali;
• le tabelle non devono essere usate per layout;
• le buone tabelle sono chiare, significative e accessibili.

Le tabelle sono utili quando vengono usate correttamente.

Ma se le usi per il layout, da qualche parte uno sviluppatore frontend rovescia il caffè.

Prossima Lezione

Nella prossima lezione impareremo i form.

I form sono il momento in cui gli utenti finalmente rispondono al sito.

È potente.

Ed è anche il punto in cui il caos ama entrare con gli occhiali da sole.