Struttura della tabella

In questa lezione vedremo come creare la struttura della tabella HTML, uno degli strumenti più potenti per la raccolta di dati e informazioni.

In passato le tabelle erano sfruttate dai web masters per il design dei layout. Lo scheletro delle pagine web era rappresentato dalle tabelle, che davano modo di organizzare i contenuti in celle di grandezze diverse. Così facendo, era possibile ottenere delle pagine web ordinate e perfettamente leggibili.

La struttura della tabella può essere più o meno complessa a seconda delle necessità, percui i tag che lavorano in funzione di essa  sono diversi.

ATTENZIONE!

Considerate le tabelle come il vostro primo passo nella progettazione di layout. Anche se rispetto al passato sono cambiati gli strumenti, i siti web continuano ad essere progettati sulla base di una griglia formata da righe e colonne, esattamente come accade per le tabelle.

Non sottovalutate dunque questo argomento perché può esservi di aiuto per comprendere appieno la logica strutturale dei layout e delle pagine web, come vedremo nelle prossime guide.

I tag principali per strutturare una tabella

Vediamo come realizzare in modo efficace — passo dopo passo — la struttura della tabella HTML. Nell’esempio che vi mostrerò, ho deciso di inserire in una tabella alcuni dati dello staff di Creative Code.

1. <TABLE>: Il mega contenitore galattico

Definiamo prima di tutto l’elemento che conterrà le righe e le colonne della nostra 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 avremo quindi una serie di intestazioni  a cui faranno riferimento i singoli dati. Creiamo dunque uno spazio adibito alle intestazioni con il tag <thead>.

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

3. <TR>:  La riga all’interno della quale potremo 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’inseriemento delle intestazioni, abbiamo 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 ci resta che creare le celle di intestrazione della nostra tabella con il tag <th>.

<table>
  <thead>
    <tr>
      <th>Foto</th>
      <th>Nome</th>
      <th>Ruolo</th>
    </tr>
  </thead>
</table>

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

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

<table>
  <thead>
    <tr>
      <th>Foto</th>
      <th>Nome</th>
      <th>Ruolo</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>
APPROFONDIMENTO

Non notate 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 vedete sopra è la struttura di una pagina HTML ridotta ai minimi termini. Seppure si stia parlando di un’architettura apparentemente più complessa, le pagine web si rifanno in un certo senso alla struttura della tabella. Occhio, ve lo avevo detto di non sottovalutarle! 😛

6. <TD>: il dato tabellare della tabella

Il corpo della nostra tabella è stato creato, quindi non perdiamo tempo  e inseriamo subito i dati attraverso il tag <td> (table data).

<table>
  <thead>
    <tr>
      <th>Foto</th>
      <th>Nome</th>
      <th>Ruolo</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>[Avatar]</td>
      <td>Giulio Carlo Tiseo</td>
      <td>Founder di Creative Code</td>
    </tr>
    
    <tr>
      <td>[Avatar]</td>
      <td>Deborah Macrino</td>
      <td>Copywriter e revisione testi</td>
    </tr>
    <tr>
      <td>[Avatar]</td>
      <td>Raffaello Sanso</td>
      <td>Visual designer</td>
    </tr>
  </tbody>
</table>

Come potete notare, per ogni riga della tabella abbiamo specificato tre elementi <td> che corrispondono rispettivamente alle voci foto, nome e ruolo presenti nell’intestazione.

Adesso diamo un’occhiata al risultato della nostra tabella in codepen.

[Anteprima codepen]

Elementi avanzati per la costruzione di tabelle

Il risultato non è niente male, ma possiamo fare 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> racchiudono numero di colonne pari al valore che viene associato all’attributo span:

Esempio:

<col span="2" width="300px" />: specifica una formattazione di 300px di larghezza per due colonne.

Vediamo come possiamo applicare questi nuovi elementi alla struttura della tabella che abbiamo appena creato.

<table border="1">
  <caption>Lo Staff di Creative Code</caption>
  <colgroup>
    <col span="1" width="150px" />
    <col span="2" width="250px" />
  </colgroup>
  <thead>
    <tr>
      <th>[Avatar]</th>
      <th>Nome</th>
      <th>Ruolo</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>[Avatar]</td>
      <td>Giulio Carlo Tiseo</td>
      <td>Founder di Creative Code</td>
    </tr>
    <tr>
      <td>Immagine</td>
      <td>Deborah Macrino</td>
      <td>Copywriter e revisione testi</td>
    </tr>
    <tr>
      <td>[Avatar]</td>
      <td>Raffaello Sanso</td>
      <td>Visual Designer</td>
    </tr>
  </tbody>
</table>

Come potete osservare dal codice in alto, abbiamo 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 width applicati all’elemento column. Osserviamoli da vicino per comprendere esattamente il significato di questi elementi:

  • <col span="1" width="150px" />: applica la larghezza di 150px ad una colonna (la prima);
  • <col span="2" width="250px" />: imposta la larghezza di 250px alle due colonne successive (la seconda e la terza);

È stato inoltre applicato l’attributo border="1" al contenitore <table> per marcare lo spessore del bordo della tabella di 1px, in modo da rendere evidente l’effetto ottenuto con la formattazione delle colonne.

APPROFONDIMENTO: <tfoot>, colspan e rowspan

Gli elementi e gli attributi che possiamo 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 ecommerce. 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). Vediamo in basso un esempio del suo utilizzo.

<table border="1">
  <caption>Perferiche 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>

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>

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>

ESERCIZIO SULLA STRUTTURA DELLA TABELLA HTML

Provate a creare la struttura di una tabella inserendo all’interno altri dati. Potete creare una tabella che faccia riferimento ai componenti della vostra famiglia, i vostri amici o pensare di elaborare una struttura con una serie di informazioni statistiche o di calcolo su un determinato settore. Fate pratica con i singoli elementi e sbizzarritevi nella costruzione di forme complesse.

Sito Web Old School [Parte 3]

Riprendete il sito web old school e preparatevi a creare le vostre tabelle. Essendo un sito web molto personale, può essere interessante mostrare la vostra esperienza lavorativa e il percorso di studi che avete compiuto o che state compiendo.

Create una o più tabelle che mostrino questi dati e cercate di non porvi limiti nella struttura. Inserite quante più informazioni possibili partendo dal classico carta e penna. Vi suggerisco vivamente questo tipo di approccio: il metodo carta e penna aiuta ad aprire la mente, rilassa i sensi e vi permette di elaborare soluzioni molto più creative. Alla base di un qualsiasi progetto, infatti, il foglio di carta è il layer fondamentale dal quale tutto prenderà vita.

Al termine di questo esercizio continueremo ad utilizzare la tabella dello staff di Creative Code per capire come inserire uno degli elementi fondamentali di un qualsiasi contenuto multimediale: le immagini.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *