Ti potrà sembrare, a primo impatto, che una tabella possa non servirti mentre sei alle prese con la stesura della tua pagina html.
In realtà non è così: prova a pensare, ad esempio, alla parte di immagazzinamento dati di un sito web e-commerce: ecco che ti balza immediatamente in mente quanto utile sia una tabella in quel caso!
La tabella in html è, quindi, un elemento indispensabile per l’organizzazione di dati tabellari.
Il linguaggio html dispone anche di tag per ovviare a questa necessità: vediamo insieme come realizzare una tabella in html.
Prima di tutto cerchiamo di analizzare la struttura di una tabella, su due fronti, aiutandoci con un supporto visivo.
Innanzitutto cerchiamo di capire com’è fatta l’ impalcatura della nostra tabella.
Come puoi vedere, una tabella è composta da righe (un esempio ne è la riga evidenziata in giallo) e colonne (la parte evidenziata in grigio chiaro). La loro intersezione dà vita a diverse celle, le quali conterranno i nostri dati.
Appresa la struttura di base, andiamo ad analizzare le componenti della nostra tabella.
Tag html tabella
Come vedi, abbiamo diverse componenti contraddistinte da altrettanti tag.
Il contenitore della nostra tabella sarà il tag <table></table> che abbraccerà tutti gli altri.
Ora, tenendo bene a mente l’immagine di cui sopra, prova a dare un’occhiata a quella qui sotto: ti aiuterà a capire con esempi concreti che cosa rappresentano gli altri tag.
Proviamo a sviscerare un pò questo esempio:
Quello che nella precedente tabella era il tag <caption></caption> e rappresentava il titolo della nostra tabella è, nell’ultima immagine, “Dati anagrafici studenti”. La caption, quindi, ci serve per dare un contesto alla nostra tabella. Per definirla, prova a rispondere alla domanda: che cosa sono questi dati?
Avvolta dal tag <thead></thead> troviamo la riga <tr></tr> che abbraccia le intestazioni della tabella, espresse, a loro volta all’interno del tag <th></th>. Il <th> sarà il titolo delle singole colonne e ci aiuterà a suddividere i dati da inserire. (nel nostro caso “nome” ed “età”)
A questo punto subentra il corpo della tabella: il tag <tbody></tbody>, costituito dai dati nelle singole celle, inseriti nel tag <td></td>. (nella nostra immagine di riferimento i <td></td> sono “Mario” “24” “Claudia” “28”).
Infine, alla base della nostra tabella troviamo il <tfoot></tfoot>, che delinea il footer della tabella.
Questa sezione serve per inserirvi all’interno dei dati di riepilogo (nel nostro caso la media delle età degli studenti.)
A questo punto dovresti avere le idee molto più chiare circa com’è fatta una tabella e quali tag utilizzare per inserirne una nel tuo documento html.
Ma, chiarita la teoria, passiamo alla pratica! Ecco un’ immagine atta a farti capire come, concretamente, scrivere il tuo codice per realizzare quanto sopra:
<table>
<caption>Dati anagrafici studenti</caption>
<thead>
<tr>
<th>Nome</th>
<th>Età</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mario</td>
<td>27</td>
</tr>
<tr>
<td>Caludia</td>
<td>25</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
Media : 26 anni
</td>
</tr>
</tfoot>
</table>
Questa è la modalità corretta di scrivere il codice per la tua tabella.
Tuttavia, se provi a verificare cosa il browser ti renderizzerà seguendo questo codice, quello che ti apparirà potrebbe non piacerti:
Come vedi, abbiamo tutti i nostri dati, ma dove sono i bordi della nostra tabella html? Dov’è la delimitazione delle celle?
La verità è che gli elementi di stile vengano aggiunti sempre attraverso l’inserimento di un foglio CSS nel codice del tuo sito, ma lo vedremo più avanti.
