Le tabelle
Le tabelle sono da sempre tra gli elementi più importanti e utilizzati da chi crea pagine web. Lo scopo originario delle tabelle HTML è quello di consentire la presentazione ordinata dei dati all'interno di una griglia, un po' come avviene nei fogli di calcolo.
Negli anni passati, è bene ricordarlo, le tabelle sono state spesso utilizzate per scopi differenti, in particolare per la creazione di interi layout. Fortunatamente, oggi questa pratica è considerata obsoleta e ha lasciato spazio a tecniche di web design moderno, note come table-less, basate sull'utilizzo combinato di <div> e CSS.
Con l’avvento di HTML5, le tabelle non sono affatto scomparse, ma sono tornate al loro utilizzo originario: uno strumento potente per visualizzare dati strutturati in modo chiaro e leggibile.
Il tag <table>
Il tag principale per la creazione di una tabella HTML è <table>. Si tratta dell’elemento genitore che racchiude l’intera struttura della tabella.
Tra gli attributi più comuni del tag <table> troviamo:
- cellspacing: definisce lo spazio (in pixel) tra una cella e l’altra;
- cellpadding: definisce lo spazio interno tra il contenuto e il bordo di ciascuna cella;
- border: imposta lo spessore del bordo della tabella;
- bordercolor: imposta il colore del bordo.
Oltre a questi, il tag <table> può includere attributi più generici come width, align, id, class, style, ecc.
Righe e celle: i tag <tr> e <td>
All’interno di <table>, i due tag fondamentali per la struttura sono <tr> e <td>:
<tr>definisce una riga della tabella;<td>definisce una cella (colonna) all’interno della riga.
Vediamo un semplice esempio di tabella HTML composta da due righe, ciascuna con tre colonne:
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</table>
Anche i tag <tr> e <td> supportano attributi utili, come:
- align: allineamento orizzontale del contenuto (es.
left,center,right); - valign: allineamento verticale (es.
top,middle,bottom); - colspan: unisce più celle in orizzontale;
- rowspan: unisce più celle in verticale.
Altri tag coinvolti nella definizione di tabelle HTML
Oltre ai tag principali, esistono altri elementi HTML che rendono le tabelle più complete e semantiche:
<thead>: definisce la sezione dell’intestazione della tabella;<tbody>: rappresenta il corpo principale della tabella;<tfoot>: definisce il piè di pagina della tabella;<th>: utilizzato all’interno delle righe di<thead>per indicare le intestazioni delle colonne.
Ecco un esempio di tabella HTML con intestazioni e corpo:
<table border="1" cellspacing="0" cellpadding="10">
<thead>
<tr>
<th>Giocatore</th>
<th>Partite</th>
<th>Punti</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mario</td>
<td>2</td>
<td>6</td>
</tr>
<tr>
<td>Luca</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>Pietro</td>
<td>2</td>
<td>0</td>
</tr>
</tbody>
</table>
Per ulteriori approfondimenti su righe, celle e intestazioni delle tabelle HTML, ti invitiamo a consultare questa lezione della nostra guida a HTML.
Genera il codice HTML delle tue tabelle
Il tool in questa pagina consente di generare rapidamente il codice HTML per una tabella personalizzata. Basta compilare le impostazioni e cliccare su "Genera codice Tabella". Il sistema restituirà il markup pronto da copiare e incollare.
Una volta generato il codice, dovrai semplicemente sostituire i contenuti delle celle con i tuoi dati reali.
