Creative Code > Guida base all'HTML > Struttura della tabella HTML

Struttura della tabella HTML

Creare griglie per dati e informazioni

creativecode avatar Giulio Tiseo

・

8 Gen, 2019

・

~8min.

Imparerai a creare la struttura della tabella HTML, ovvero l'elemento utilizzato per l'inserimento di informazioni o dati nelle pagine web.

Contenuti in questo articolo
Requisiti

Per affrontare questo articolo molto dettagliato sulle tabelle hai bisogno di una solida base sul principi dell’HTML e sulla costruzione della pagine web. Se non hai ancora letto l’articolo Creare una pagina web da zero, ti suggerisco di farlo. Inoltre, essendo gli elementi della tabella piuttosto avanzati per chi è alle prime armi, avere idea di cosa siano gli attributi di un tag è senza dubbio un aspetto da non sottovalutare.

In passato le tabelle erano sfruttate dai web master per lo sviluppo del design di un sito. Fino ad inizio anni 2000 si faceva largamente uso delle tabelle per realizzare lo scheletro delle pagine web.

Il cruccio di ogni designer è sempre stato quello di riuscire disporre nella pagina i contenuti secondo una logica ben definita. La struttura della tabella da questo punto di vista è sempre stata molto efficace perché permette di inserire titoli, paragrafi e altri contenuti di varia natura in celle di grandezza più o meno variabile.

Per rispondere alle necessità degli sviluppatori, l’HTML mette a disposizione una serie di sottoelementi, ovvero un sottoinsieme di tag esclusivamente funzionali all’elemento tabella, che possono essere utilizzati per realizzare tabelle dalle forme più svariate. 

ATTENZIONE!

Considera le tabelle come il tuo primo passo nella progettazione di layout. Anche se rispetto al passato sono cambiati i tag di riferimento in materia di layout, moltissimi siti web continuano ad essere progettati sulla base di una griglia formata da righe e colonne, esattamente come accade per le tabelle.

Non sottovalutare dunque questo argomento perché potrà esserti di aiuto per comprendere appieno la logica strutturale dei layout e delle pagine web.

# I tag principali per strutturare una tabella

Vediamo come realizzare in modo efficace — passo dopo passo — la struttura della tabella HTML. Nell’esempio che ti mostrerò, ho deciso di creare una tabella che mostra le varie forme di rappresentazione della scala dei colori RGB (Red, Green, Blue) secondo le notazioni standard Esadecimale (HEX), CMYK, HSB (Hue Saturation Brighteness).

Armati di Visual Studio Code e Browser, prepara un Boilerplate e seguimi..

1. <TABLE>: Il mega contenitore galattico

Definisci prima di tutto l’elemento che conterrà le righe e le colonne della tabella:

<table></table>

2. <THEAD>: Il blocco di colonne che prevede l’inserimento delle intestazioni o etichette della tabella

Una tabella è un raccoglitore di dati e informazioni. Nella parte alta della tabella avrai quindi una serie di intestazioni  a cui faranno riferimento i singoli dati. Crea dunque uno spazio adibito alle intestazioni con il tag <thead>.

<table>
  <thead></thead>
</table>

3. <TR>:  La riga all’interno della quale potrai disporre i dati

La struttura di una qualsiasi tabella è composta da righe e colonne, dove ciascuna intersezione rappresenta una cella. Dunque, prima di procedere con l’inserimento delle intestazioni, hai bisogno di creare una riga con il tag <tr> (table row) in modo tale da poter ricavare le celle di intestazione.

<table>
  <thead>
    <tr></tr>
  </thead>
</table>

4. <TH>: La cella di intestazione della tabella

A questo punto non ti resta che creare le celle di intestazione della tabella con il tag <th>.

<table>
  <thead>
    <tr>
      <th>Colore</th>
      <th>HEX</th>
      <th>CMYK</th>
      <th>HSB</th>
    </tr>
  </thead>
</table>

5. <TBODY>: Il blocco di righe che contiene le celle del contenuto principale della tabella

Perfetto! Hai creato la tua prima riga per le intestazioni. Adesso devi definire con il tag <tbody> lo spazio adibito ai dati da inserire subito dopo il <thead>.

<table>
  <thead>
    <tr>
      <th>Colore</th>
      <th>HEX</th>
      <th>CMYK</th>
      <th>HSB</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

ALT! Non noti la somiglianza con una struttura piuttosto famigliare?

<html>
  <head>
    <title>Titolo</title>
  </head>
  <body>
    <p>Paragrafo 1</p>
    <p>Paragrafo 2</p>
  </body>
</html>

Questa che vedi sopra è la struttura di una pagina HTML ridotta ai minimi termini. Seppure si stia parlando di un’architettura apparentemente più complessa, la costruzione delle pagine web, almeno formalmente, è molto simile alla struttura della tabella!

6. <TD>: il dato tabellare della tabella

Il corpo della tua tabella è pronto, adesso devi inserire i dati attraverso il tag <td> (table data).

<table>
   <thead>
      <tr>
         <th>Colore</th>
         <th>HEX</th>
         <th>CMYK</th>
         <th>HSB</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Rosso</td>
         <td>#ff0000</td>
         <td>0, 100, 100, 0</td>
         <td>0, 100, 100</td>
      </tr>
      <tr>
         <td>Verde</td>
         <td>#00ff00</td>
         <td>57, 0, 100, 0</td>
         <td>120, 100, 100</td>
      </tr>
      <tr>
         <td>Blu</td>
         <td>#0000ff</td>
         <td>89, 75, 0, 0</td>
         <td>240, 100, 100</td>
      </tr>
   </tbody>
</table>

Come puoi notare, per ogni riga della tabella ho specificato quattro elementi <td> che corrispondono rispettivamente alle voci nome, hex, cmyk e hsb presenti nell’intestazione.

Adesso prova a vedere il risultato della tabella nel browser.

Esempio tabella RGB
Esempio della struttura di una tabella HTML che mostra la scala colori RGB

# Elementi avanzati per la costruzione di tabelle

Il risultato non è super, ma si può fare sicuramente di meglio attraverso altri elementi come il <caption>, il <colgroup> e il <col>.

<CAPTION>

Il caption è un elemento molto semplice che ci permette di definire un titolo della tabella prima dell’elemento <thead>.

<COLGROUP>

Il <colgroup> rappresenta un raggruppamento di una o più colonne a cui possiamo attribuire una determinata formattazione.

<COL>

Il <col> è il tag che viene utilizzato per definire delle regole che impostano una formattazione generale delle colonne. I <col>  non possono essere espressi al di fuori dell’elemento <colgroup> e racchiudono un numero di colonne pari al valore descritto nell’attributo span:

<col span="2" />

Per comprendere meglio il senso di span osserva con attenzione questo esempio:

<table>
    <caption>Supereroi</caption>
    <colgroup>
        <col span="2" style="background-color: lightblue">
        <col span="2" style="background-color: crimson">
    </colgroup>
    <tr>
        <th>Batman</th>
        <th>Robin</th>
        <th>Flash</th>
        <th>Kid Flash</th>
    </tr>
    <tr>
        <td>Smarts</td>
        <td>Dex, acrobat</td>
        <td>Super speed</td>
        <td>Super speed</td>
    </tr>
</table>

Come puoi osservare dal codice in alto, ho definito un titolo della tabella attraverso il tag <caption>, dopodiché è stata impostata una formattazione per le colonne specificando all’interno dell’elemento <colgroup>, due self-closing tag <col />. La formattazione è resa possibile dagli attributi span e style applicati all’elemento column. In pratica stiamo dicendo al browser che alle prime due colonne della tabella dovrà essere applicato un colore di background celeste, mentre alle altre due vogliamo che sia rosso.

Non mi soffermerei troppo sull’attributo style in quanto è un argomento che esula un po’ dall’HTML e sarà oggetto di una guida dedicata ai CSS. L’importante adesso è che sia chiaro come il colgroup con i suoi col può impostare delle formattazioni all’interno della tabella specificando il numero di colonne. È ora di vedere il risultato:

Col e Colgroup nella struttura della tabella HTML
Attraverso il col possiamo definire nella tabella una formattazione da applicare ad un numero di colonne arbitrario definito nell’attributo span

# Altri elementi per le tabelle

<TFOOT>

Gli elementi e gli attributi che puoi definire nella tabella non sono finiti qui. Esistono strutture tabellari più complesse che richiedono delle formattazioni alternative. Basti pensare alle tabelle che esprimono il calcolo di una serie di oggetti che abbiamo inserito nel carrello di un e-commerce. Normalmente abbiamo una lista di elementi con un prezzo e alla fine della tabella troviamo una riga che ci mostra il totale. Il blocco di righe che contiene le celle da utilizzare in fondo alla tabella viene espresso mediante il tag <tfoot> (column summary). Osserva in basso un esempio del suo utilizzo.

<table border="1">
   <caption>Periferiche da acquistare</caption>
   <thead>
      <tr>
         <th>Nome</th>
         <th>Prezzo</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Leopold Keyboard</td>
         <td>150 Euro</td>
      </tr>
      <tr>
         <td>Logitech Mouse</td>
         <td>22 Euro</td>
      </tr>
      <tr>
         <td>Stampante Canon</td>
         <td>100 Euro</td>
      </tr>
   </tbody>
   <tfoot>
      <tr>
         <td><b>Totale</b></td>
         <td><strong>272 Euro<strong></td>
      </tr>
   </tfoot>
</table>
Border e Tfoot nella tabella HTML
L’attributo border aiuta a definire i contorni delle celle, mentre il tfoot potrebbe essere mostrato per mostrare il totale di una lista della spesa

I tag <td> e <th> possono avvalersi di attributi come il colspan e il rowspan per indicare rispettivamente il numero di colonne o il numero di righe attraverso la quale una cella può espandersi. Questa modalità permette la costruzione di tabelle più complesse. In basso osserviamo due esempi molto semplici.

ROWSPAN: Espandere una colonna su più righe.

<table border="1">
   <caption>Perferiche</caption>
   <tr>
      <th rowspan="3">Periferiche</th>
      <td>Leopold Keyboard</td>
   </tr>
   <tr>
      <td>Logitech Mouse</td>
   </tr>
   <tr>
      <td>Canon Printer</td>
   </tr>
</table>
Rowspan nella struttura della tabella HTML
La colonna dove indichiamo l’intestazione laterale della tabella, grazie all’attributo rowspan, è in grado di occupare tre righe in modo da raggruppare in modo diverso l’insieme di dati

COLSPAN: Espandere una colonna su più colonne.

<table border="1">
   <tr>
      <th colspan="3">Periferiche</th>
   </tr>
   <tr>
      <td>Leopold Keyboard</td>
      <td>Logitech Mouse</td>
      <td>Canon Printer</td>
   </tr>
</table>
Colspan nella tabella HTML
Possiamo creare con l’attributo colspan un’intestazione in grado di inglobare più colonne

ESERCIZIO SULLA STRUTTURA DELLA TABELLA HTML

Prova adesso a creare la struttura della tua tabella. Puoi creare una tabella sui linguaggi che intendi studiare, sulle tue passioni, sui tuoi amici o puoi provare ad elaborare una struttura con una serie di informazioni statistiche o di calcolo. Fai pratica con i singoli elementi e sbizzarrisciti nella costruzione di forme sempre più complesse.

# Creare una pagina web in puro HTML – Il classico social (Parte 3)

Riprendi il classico social e preparati a creare una nuova tabella. Essendo la tua pagina di profilo, potrebbe essere utile inserire una serie di dati anagrafici e biografici che ti descrivono in breve.

Crea una tabella dove inserire info e contatti (numero di telefono, email, profili social quali Facebook, Linkedin, Instagram, Twitter, ecc..).

Inserisci quante più informazioni possibili partendo magari dal classico carta e penna. Ti suggerisco vivamente questo tipo di approccio: il metodo carta e penna aiuta ad aprire la mente, rilassa i sensi e ti permette di elaborare soluzioni molto più creative.

Non dimenticare: il foglio di carta è il layer fondamentale dal quale prenderà vita ogni tuo sito web.

Al termine di questo esercizio continuerai ad utilizzare la tabella per creare una bella galleria di immagini da inserire nella pagina profilo del tuo classico social.

Link utile all’approfondimento della tabella HTML: Developer Mozilla