Corso HTML: come creare una tabella

In questo nuovo articolo relativo al corso HTML andremo a vedere come creare una tabella in HTML, per gestire i dati in maniera ordinata.

La tabella in HTML è uno strumento utile per organizzare dati in maniera schematica e semplice. Ad esempio se si vuole fare un elenco di specifiche tecniche è consigliato usare una tabella piuttosto che un elenco puntato. Inoltre la tabella si può personalizzare tramite CSS attraverso semplici istruzioni che ne permettono di modificare l’aspetto. Ma andiamo a vedere nel dettaglio come crearne una.

Struttura base di una tabella in HTML

Di seguito trovate il codice standard per creare una tabella:

<table>

<tr><th>Titolo colonna 1</th><th>Titolo colonna 2</th><th>Titolo colonna 3</th></tr>

<tr><td>Elemento 1 riga 1</td><td>Elemento 1 riga 1</td><td>Elemento 1 riga 1</td></tr>

<tr><td>Elemento 1 riga 1</td><td>Elemento 1 riga 1</td><td>Elemento 1 riga 1</td></tr>

<tr><td>Elemento 1 riga 1</td><td>Elemento 1 riga 1</td><td>Elemento 1 riga 1</td></tr>

</table>

 

Il tag principale per creare una tabella è <table>. Poi è possibile distinguere le varie parti della tabella, come l’header, il foot e il body attraverso i rispettivi tag (facoltativi) <thead>, <tbody> e <tfoot>. Il <thead>raggruppa gli elementi che rappresentano solitamente i titoli delle colonne. Il <tbody>contiene i dati nudi e crudi che andrete ad inserire nella tabella, come valori numerici, percentuali o statistiche. Infine il <tfoot>può contenere riepiloghi, somme o comunque dati che non fanno parte delle specifiche ma comunque rimandano ad esse. Questi tag non sempre sono necessari.

<table>

<thead>

<tr><th>Titolo colonna 1</th><th>Titolo colonna 2</th><th>Titolo colonna 3</th></tr>

</thead>

<tbody>

<tr><td>Elemento 1 riga 1</td><td>Elemento 1 riga 1</td><td>Elemento 1 riga 1</td></tr>

<tr><td>Elemento 1 riga 1</td><td>Elemento 1 riga 1</td><td>Elemento 1 riga 1</td></tr>

</tbody>

<tfoot>

<tr><td>Elemento 1 riga 1</td><td>Elemento 1 riga 1</td><td>Elemento 1 riga 1</td></tr>

</tfoot>

</table>

 

All’interno di questi ultimi tag andranno inserite le varie righe ed elementi come mostrati nel codice sopra. Alla fine però questi tag servono essenzialmente per separare le zone della tabella, senza andare a modificare nulla nella struttura di base. Andiamo a vedere cosa indicano gli altri tag interni.

Principali tag di una tabella in HTML

<tr>crea una riga della tabella. E’ l’abbreviazione di table row e al suo interno si può inserire sia un <th>, ossia un table head, che rappresenta i titoli delle colonne principali, oppure un <td>, ovvero un table data, che rappresenta una cella della tabella. A seconda delle necessità, si creerà l’una o l’altra. Un tag di tipo <td>può contenere anche un’ulteriore tabella (<td><table>...</table></td>), creando così una struttura annidata, dove l’elemento di una tabella è un’altra tabella.

Unire due righe o due colonne

E’ possibile fare in modo che una cella possa occupare il posto di due righe o di due colonne, generando una cella più grande. Ad esempio è utile per poter fare una tabella con tot righe di due colonne e un’ultima riga unica che copra due colonne, restando centrata nella tabella. Per fare ciò si usano essenzialmente due attributi: colspan e rowspan. La sintassi è la seguente:

<table>

<tbody>

<tr><td colspan="2">Elemento 1 riga 1</td><td>Elemento 1 riga 1</td><td>Elemento 1 riga 1</td></tr>

<tr><td rowspan="2">Elemento 1 riga 1</td><td>Elemento 1 riga 1</td><td>Elemento 1 riga 1</td></tr>

Il valore di rowspan o colspan indica il numero di righe/colonne che andrà ad occupare una singola cella.

 

Potrebbero interessarti anche...

Facci sapere la tua opinione!