Corso di HTML / Creare tabelle con table, tr, th e td

Usate una tabella HTML per dati i cui valori sono relativi a righe e colonne. Un elemento table contiene righe (tr); ogni riga ha celle di intestazione (th) o celle di dati (td). Non usate una tabella solo per posizionare parti di una pagina.

La struttura di base della tabella

Questa piccola tabella mostra l'inventario di due tipi di frutta. La prima riga nomina le colonne; le righe seguenti contengono i valori.

<table>
  <tr>
    <th>Frutta</th>
    <th>Inventario</th>
  </tr>
  <tr>
    <td>Mele</td>
    <td>12 pezzi</td>
  </tr>
  <tr>
    <td>Pere</td>
    <td>8 pezzi</td>
  </tr>
</table>

I dati appaiono riga per riga e colonna per colonna come segue:

Inserite il codice nel body di un file HTML. Ogni tr costituisce una riga orizzontale e le sue celle appaiono da sinistra a destra. Lo stile di tabella predefinito del browser può mostrare pochi o nessun bordo; aggiungete bordi CSS solo dopo aver strutturato correttamente i dati. Quando progettate una tabella, disegnate prima le sue colonne e righe. Per aggiungere un altro tipo di frutta, aggiungete un'altra riga di dati con il nome del tipo di frutta e un valore di magazzino.

Separare le righe di intestazione e di dati

Utilizzate thead e tbody se si desidera raggruppare esplicitamente le righe dell'intestazione e dei dati. Una riga di riepilogo può essere posizionata in tfoot. Questi elementi organizzano le righe; non producono colori o bordi da soli. È possibile ometterli in una piccola tabella, anche se l'analizzatore HTML del browser potrebbe inserire un tbody nell'albero del documento, anche se non è stato scritto nel codice sorgente.

<table>
  <thead>
    <tr><th>Frutta</th><th>Inventario</th></tr>
  </thead>
  <tbody>
    <tr><td>Mele</td><td>12 pezzi</td></tr>
    <tr><td>Pere</td><td>8 pezzi</td></tr>
  </tbody>
</table>

Selezionare le celle dell'intestazione e le celle dei dati

Usate th quando un valore identifica una riga o una colonna; usate td per i dati collegati a questa intestazione. Non scegliete semplicemente th per rendere il testo in grassetto. Una tabella può avere sia intestazioni di colonna sia di riga. Inserite le unità accanto a ciascun numero o in un'intestazione appropriata. Un singolo valore come "12" potrebbe non mostrare ai lettori se si tratta di articoli o di un prezzo. Approfondite il titolo della tabella, l'attributo scope e le celle unite negli esempi di Tabelle accessibili: caption, scope e celle unite .

Non appena le basi sono chiare, potete aggiungere caption per nominare la tabella, scope per chiarire le relazioni delle intestazioni e colspan o rowspan se una cella copre effettivamente più posizioni. Il riferimento alla tabella su MDN descrive queste funzioni.

In un vero file HTML, racchiudete una tabella ampia con un contenitore come segue. Il CSS overflow-x permette uno scorrimento orizzontale senza eliminare i dati o modificare la direzione della tabella.

<div class="table-scroll">
  <table>
    <!-- Inserisci qui le righe della tabella precedente. -->
  </table>
</div>

.table-scroll { max-width: 100%; overflow-x: auto; }

Correggere una tabella con celle disallineate

Verificate che ogni riga normale contenga il numero previsto di celle. Numeri diversi di celle possono spostare i dati sotto l'intestazione sbagliata. Se una tabella larga viene tagliata su uno schermo stretto, considerate una barra di scorrimento orizzontale, invece di comprimere il contenuto fino a renderlo illeggibile. Non inserite spazi ripetuti all'interno delle celle per imitare le colonne; l'allineamento e i bordi appartengono al CSS, mentre le relazioni dei dati appartengono all'HTML.