Corso HTML – Le tabelle (table, tr, td)

Le tabelle sono una degli elementi più importanti del codice HTML: nate agli inizi del Web per impaginare dati aggregati, si sono poi trasformate in uno strumento indispensabile (ma improprio) per gestire il layout grafico di un sito.

I tag necessari per creare una tabella sono:

• <table> – apre la tabella
• <tr> – indica l’apertura di una riga
• <td> – indica l’apertura di una colonna

L’attributo border permette di specificare di quanti pixel deve essere il bordo delle tabelle. Ad esempio:

<table border="1">
<tr>
<td>prima cella</td>
<td>seconda cella</td>
</tr>
<tr>
<td>terza cella</td>
<td>quarta cella</td>
</tr>
</table>

Viene visualizzato così:

Possiamo specificare la larghezza e l’altezza delle tabelle tramite gli attributi width e height che possono essere indicati per tutti e tre i tag (<table>, <tr>, <td>). Il valore di questi due attributi può essere specificato in maniera fissa, cioè in pixel (basta indicare un numero intero), oppure in percentuale (in questo caso al numero deve seguire il simbolo “%”). Nel caso di misure in percentuale la dimensione si adatta secondo lo spazio a disposizione.

<table width="300" height="200" border="1">
<tr>
<td>prima cella</td>
<td>seconda cella</td>
</tr>
<tr>
<td>terza cella</td>
<td>quarta cella</td>
</tr>
</table>

Viene visualizzato così:

Oppure:

<table width="75%" border="1">
<tr>
<td width="25%">prima cella</td>
<td width="75%">seconda cella</td>
</tr>
<tr>
<td width="25%">terza cella</td>
<td width="75%">quarta cella</td>
</tr>
</table>

che viene visualizzato così:

N.B. L’altezza in percentuale non sempre è visualizzata correttamente da tutti i browser.