Le tabelle
Le tabelle sono da sempre tra gli elementi più importanti ed utilizzati da chi crea pagine web. Lo scopo originario delle tabelle HTML è quello di consentire la presentazione di dati in modo ordinato all'interno di una griglia (per intenderci un po' come avviene all'interno di un file).
Negli anni passati, è bene ricordarlo, le tabelle sono state spesso utilizzate per i più vari scopi come, soprattutto, la creazione di interi layout. Fortunatamente oggi questa prassi di web design può dirsi in disuso a vantaggio delle tecniche table-less che si basano sull'utilizzo combinato di <div> e sintassi CSS.
Ad oggi - con l'avvento di HTML5 - le tabelle non sono certo andate in disuso, tuttavia il loro utilizzo è rientrato nell'alveo originale quale strumento per la presentazione ordinata di dati.
Il tag <table>
Ovviamente il tag principale coinvolto nella creazione di tabele HTML è il tag <table>. Si tratta del tag che crea l'elemento genitore della nostra griglia.
Questo tag possiede diversi attributi, i più utilizzati sono:
- cellspacing: definisce lo spazio (in pixel) tra le varie celle della tabella;
- cellpadding: definisce lo spazio interno tra il contenuto ed il margine di ciascuna cella;
- border: definisce lo spessore del bordo che separa ciascuna cella;
- bordercolor: definisce il colore del bordo.
Oltre a questi attributi, il tag <table> ne ammette diversi altri piuttosto generici come width, align, id, class, style, ecc.
Linee e colonne: i tag <tr> e <td>
All'interno di <table>, i principali tag coinvolti nella definizione di una tabella HTML sono <tr> e <td>, cioè, rispettivamente, il tag per la creazione di linee e colonne: con il tag <tr> creo una nuova linea all'interno della tabella, mentre con il tag <td> divido la linea in più celle. Vediamo un semplice esempio di una tabelle HTML composta da due linee ciascuna suddivisa in 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> ammettono degli attributi. I più utilizzati riguardano l'allineamento dei contenuti e sono align (alineamento orizzontale) e valign (allineamento verticale). Particolarmente importanti per il tag <td> (anche se non molto utilizzati) sono gli attributi colspan e rowspan che consentono di unire più celle, rispettivamente, in orizzontale e verticale.
Altri tag coinvolti nella definizione di tabelle HTML
Oltre ai tag citati, che come detto sono i principali, la gestione delle tabelle in HTML coinvolge diversi altri tag come, ad esempio i tag <thead>, <tbody> e <tfoot> che definiscono, rispettivamente, l'header, il corpo ed il footer della tabella.
Altro tag interessante, che apprtiene alla sezione header della tabella, è il tag <th> che, all'interno di una linea (<tr>) definisce i titoli delle varie colonne:
<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 un ulteriore approfondimento completo circa le tabele in HTML rimandiamo a questa lezione della nostra Guida a HTML.
Genera il codice HTML delle tue tabelle
L'utilizzo di questo tool è semplicissimo: è sufficiente compilare le varie impostazioni e cliccare sul bottone "Genera codice Tabella". Il sistema restituirà il codice HTML della tabella formattata secondo le impostazioni prescelte.
Una volta creato, ovviamente, il codice HTML della tabella deve essere popolato coi dati che si intende presentare.
