Tabelle HTML – Un tutorial con esempi di codice

Articolo originale: https://www.freecodecamp.org/news/html-tables-table-tutorial-with-css-example-code/

Quando stai realizzando un progetto e hai bisogno di rappresentare dei dati, è importante mostrare le informazioni in modo che siano facili da leggere e da comprendere.

A seconda del tipo di dati, puoi scegliere diversi metodi di rappresentazione con degli elementi HTML.

Nella maggior parte dei casi, le tabelle sono il modo più conveniente per visualizzare grandi quantità di dati strutturati in modo gradevole. Ecco perché in quest'articolo impareremo come usare le tabelle HTML e come impostarne lo stile.

Ma prima di tutto: cos'è una tabella in HTML?

Cos'è una tabella in HTML?

Una tabella è una rappresentazione di dati disposti in righe e colonne. In realtà, è più simile a un foglio di calcolo. In HTML, con l'aiuto delle tabelle, puoi disporre dati come immagini, testo, link e così via, in righe e colonne formate da celle.

Recentemente, l'uso delle tabelle nel web è diventato più popolare grazie a dei fantastici tag HTML, che ne semplificano la creazione e il design.

Per creare una tabella in HTML devi usare diversi tag. Il più importante è il tag <table>, il contenitore principale della tabella, che indica dove inizia e finisce la tabella.

Tag HTML comuni per le tabelle

Altri tag sono:

• <tr> - rappresenta le righe
• <td> - usato per creare celle di dati
• <th> - usato per aggiungere le intestazioni della tabella
• <caption> - usato per inserire didascalie
• <thead> - aggiunge un'intestazione separata alla tabella
• <tbody> - indica il corpo principale della tabella
• <tfoot> - crea un piè di pagina separato per la tabella

Sintassi delle tabelle HTML:

<table>
  <tr>
    <td>Cella 1</td>
    <td>Cella 2</td>
    <td>Cella 3</td>
  </tr>
  <tr>
    <td>Cella 4</td>
    <td>Cella 5</td>
    <td>Cella 6</td>
  </tr>
</table>

Ora che sai cos'è una tabella HTML e come crearne una, proseguiamo e vediamo in che modo possiamo utilizzare tutti questi tag per creare tabelle con più funzionalità.

Come aggiungere un'intestazione a una tabella in HTML

<th> viene usato per aggiungere un'intestazione a una tabella. In un design di base, l'intestazione della tabella occupa sempre la riga in cima, quindi vuol dire i <th> devono essere presenti nella prima riga della tabella, seguiti dai dati effettivi. Come impostazione predefinita, il testo delle intestazioni è centrato e in grassetto.

Un esempio dell'uso di <th>

<table>
  <tr>
    <th>Nome</th>
    <th>Cognome</th>
    <th>Indirizzo Email</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>tables@mail.com</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>developer@mail.com</td>
  </tr>
</table>

Dall'esempio qui sopra, siamo in grado di dire che tipo di informazione contiene ogni colonna. Questo è possibile grazie all'uso dei tag <th>.

Come aggiungere una didascalia a una tabella

L'utilizzo principale dell'aggiunta di una didascalia a una tabella è fornire una descrizione circa i dati rappresentati nella tabella. La didascalia può essere posizionata sia sopra che sotto la tabella e, di default, sarà sempre centrata.

Per aggiungere una didascalia in una tabella, usiamo il tag <caption>.

Sintassi di caption

<table>
  <caption></caption>
  <tr> </tr>
</table>

Un esempio dell'uso di <caption>

<table>
  <caption>Risorse gratuite per imparare a programmare</caption>
  <tr>
    <th>Siti</th>
    <th>Canali Youtube</th>
    <th>App Mobile</th>
  </tr>
  <tr>
    <td>Freecode Camp</td>
    <td>Freecode Camp</td>
    <td>Enki</td>
  </tr>
  <tr>
    <td>W3Schools</td>
    <td>Academind</td>
    <td>Programming Hero</td>
  </tr>
  <tr>
    <td>Khan Academy</td>
    <td>The Coding Train</td>
    <td>Solo learn</td>
  </tr>
</table>

Come usare l'attributo scope nelle tabelle HTML

L'attributo scope è usato per definire se una specifica intestazione è dedicata a una colonna, una riga o a  gruppi di entrambe. La definizione potrebbe essere fuorviante, ma aspetta un attimo – con l'aiuto del prossimo esempio capirai meglio.

Lo scopo principale dell'attributo scope è indicare i dati di riferimento, in modo che l'utente non debba basarsi su delle supposizioni. L'attributo viene dichiarato nel tag di apertura <th> e accetta i valori col, row, colgroup e rowgroup.

I valori col e row indicano che la cella di intestazione fornisce informazioni per una colonna o una riga, rispettivamente.

Sintassi di scope

<table>
 <tr>
   <th scope="valore">
 </tr>
</table

Un esempio dell'utilizzo di <scope>

<table>
  <tr>
    <th></th>
    <th scope="col">Semestre</th>
    <th scope="col">Voto</th>
  </tr>

  <tr>
    <td>1</td>
    <td>Jan - April</td>
    <td>Credit</td>
  </tr>

  <tr>
    <td>2</td>
    <td>May - August</td>
    <td>Pass</td>
  </tr>
    
  <tr>
    <td>2</td>
    <td>September - December</td>
    <td>Distinction</td>
  </tr>
</table>

Ciò che fa l'attributo scope è indicare se l'intestazione di una cella appartiene alla colonna, alla riga o a un gruppo di entrambe.

In questo caso, le intestazioni appartengono alle colonne, perché le abbiamo impostate così nel codice. Puoi sbizzarrirti cambiando il valore dell'attributo per ottenere risultati diversi.

Come estendere le celle in una tabella HTML

Forse, potresti aver incontrato delle celle che si estendono su due o più colonne o righe in una tabella. Questo è ciò che viene chiamato "cell spanning".

Se hai lavorato con programmi come MS Office o Excel, probabilmente hai ottenuto questo design con l'uso di funzioni evidenziando delle celle, cliccando il comando, e voilà!  

La stessa funzionalità può essere applicata in una tabella HTML usando due attributi di cella, colspan per l'estensione orizzontale e rowspan per l'estensione verticale. Ai due attributi sono assegnati dei numeri maggiori di zero che indicano il numero delle celle da occupare.

Un esempio dell'uso di span

<table>
  <tr>
    <th>Nome</th>
    <th>Materia</th>
    <th>Voto</th>
  </tr>
  <tr>
    <td rowspan = "2">Hillary</td>
    <td>Advanced Web</td>
    <td>75</td>
  </tr>
  <tr>
    <td>Operating System</td>
    <td>60</td>
  </tr>
      <tr>
    <td rowspan = "2">Lary</td>
    <td>Advanced Web</td>
    <td>80</td>
  </tr>
  <tr>
    <td>Operating System</td>
    <td>75</td>
  </tr>
  <tr>
     <td></td>
    <td colspan="3">Total Average: 72.5</td>
  </tr>
</table>

Nell'esempio qui sopra, abbiamo una cella che occupa due colonne e due celle che occupano due righe. In questo modo, abbiamo applicato lo span sia orizzontalmente che verticalmente.

Quando usi i valori colspan e rowspan, assicurati di dichiararli correttamente per evitare di sovrapporre delle celle.

Come aggiungere testata, corpo e piè di pagina nelle tabelle HTML

Proprio come un sito web o qualsiasi altro documento, una tabella ha tre sezioni principali – la testata, il corpo e il piè di pagina.

In una tabella, sono divise grazie ai tag:

• <thead> - fornisce una testata separata per la tabella
• <tbody> - racchiude il contenuto principale della tabella
• <tfoot> - crea un piè di pagina separato per la tabella

Un esempio dell'uso di <thead>, <tbody> & <tfoot>

<table>
  <thead>
    <tr>
      <th colspan="2">Ottobre</th>
      <th colspan="2">Novembre</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Vendite</td>
      <td>Guadagno</td>
      <td>Vendite</td>
      <td>Guadagno</td>
    </tr>
    <tr>
      <td>$200,00</td>
      <td>$50,00</td>
      <td>$300,000</td>
      <td>$70,000</td>
    </tr>
  </tbody>
    
  <tfoot>
    <tr>
      <th colspan= "4">Novembre è stato più produttivo</th>
    </tr>
  </tfoot>
</table>

Nell'esempio qui sopra, la testata corrisponde al nome dei mesi, la parte con le vendite e il guadagno di entrambi i mesi è il corpo della tabella, mentre il commento finale rappresenta il piè di pagina della tabella.

Un'altra cosa importante da notare è che una tabella può avere più di un corpo. In una situazione del genere, ogni corpo raggruppa insieme le righe che sono correlate.

Come impostare lo stile delle tabelle HTML con il CSS

Anche se le tabelle sono ampiamente utilizzate oggigiorno, è molto raro trovarne una che non abbia uno stile particolare. La maggior parte delle tabelle ha diverse forme di stile, che si tratti del colore, dei caratteri, di evidenziare valori importanti e via dicendo.

Lo stile rende le tabelle più professionali e accattivanti alla vista. In fin dei conti, non vuoi di certo che il tuo lettore si ritrovi a fissare dei dati divisi da una singola linea.

A differenza di altri linguaggi o strumenti, in HTML è necessario usare un altro file con una estensione .css, creato per personalizzare lo stile e collegato al file HTML.

Qui sotto, puoi trovare del codice con un esempio di tabella con stile personalizzato. Sentiti libero di curiosare per vedere come le diverse impostazioni influiscono sul risultato finale.

Nel pen qui sopra, ho creato una tabella e impostato il suo stile usando alcuni degli attributi trattati in questo articolo.

Lo stile è stato impostato usando un file CSS, in cui sono stati aggiunti colori e bordi per rendere la tabella più leggibile e per abbellirla. La tabella possiede anche una intestazione fissa, così da poter scorrere i dati potendo sempre vedere l'intestazione di una particolare colonna.

Abbiamo visto cos'è una tabella, ne abbiamo create alcune e abbiamo anche fatto un altro passo avanti applicando uno stile personalizzato.

Ma avere queste conoscenze senza sapere quando applicarle non è di nessun aiuto. Detto ciò, dove e quando dovresti usare usare delle tabelle?

Quando usare una tabella

Ci sono molte situazioni in cui le tabelle possono tornare utili nello sviluppo dei tuoi progetti:

• Puoi usare delle tabelle quando vuoi confrontare dei dati con delle caratteristiche comuni come differenze tra due oggetti A e B o i punteggi della squadra X rispetto a Y.
• Puoi usare una tabella anche per dare una panoramica di dati numerici. Un buon esempio è la rappresentazione dei voti di studenti o addirittura i risultati delle squadre di un campionato.
• Una tabella può aiutare i lettori a trovare velocemente delle informazioni specifiche disposte in modo chiaro. Ad esempio, nel caso di una lunga lista di nomi, una tabella può essere usata per suddividere la lista e semplificare la lettura.

In conclusione

La tabelle sono un ottimo modo di rappresentare dati e puoi crearle usando elementi HTML di base come table, tr e td.

Puoi anche aggiungere degli stili per abbellirle e presentare i dati in modo chiaro con l'aiuto di un file CSS.

Per concludere, ecco una tabella che riassume tutto ciò che abbiamo trattato in questo articolo. Confronta il tuo design con la tabella nel pen qui sotto: