Table

In HTML le tabelle vengono utilizzate soprattutto per realizzare documenti con un layout preciso.

Utilizzando le tabelle é infatti possibile disporre gli elementi nella pagina nel modo desiderato, qualsiasi essi siano.

Dentro alla cella di una tabella é infatti possibile inserire tutto il codice HTML visto finora (immagini, paragrafi, titoli, link etc.).

Il procedimento per creare una tabella in HTML é differente rispetto a quello utilizzato in programmi come word: non è infatti possibile indicare a priori il numero di righe e di colonne che compongono la tabella.

Creazione di una tabella

In HTML la tabella é introdotta dal tag <table> e si costruiscono poi le righe (tag <tr>) una per volta e, dentro le righe, le celle, o colonne (tag <td>).
Tutte le righe di una tabella devono avere lo stesso numero di celle.

 

esempio tabelle

Per creare una tabella le cui righe abbiano un diverso numero di celle è necessario utilizzare gli attributi colspan e rowspan del tag <td>.

Es. colspan:

colspan tabelle

Codice HTML corrispondente:

<table border="1">
<tr>
<td colspan="2"> &nbsp; </td>
<td> &nbsp; </td>
</tr>
<tr>
<td> &nbsp; </td>
<td> &nbsp; </td>
<td> &nbsp; </td>
</tr>
</table>

Es. rowspan:

rospan tabelle

Codice HTML corrispondente:

<table border="1">


<tr>


<td rowspan="2">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>


</tr>


<tr>


<td>&nbsp;</td>
<td>&nbsp;</td>


</tr>


</table>

Suggerimento: per creare una cella vuota utilizzare l'entità &nbsp; all'interno di <td>.

<td>&nbsp;</td>

Le tabelle possono essere annidate, inserendo una nuova tabella dentro al tag <td>.

Il tag <th> (table header) ha il valore semantico di titolo della tabella e viene visualizzato dai browser centrato e in grassetto.

Il tag <caption> serve a inserire una didascalia alla tabella.

Attributi dei tag:

<table> | <tr> | <td>(<th>) | <caption>

Gli attributi principali del tag <table> sono:

SUMMARY="Text" Descrive lo scopo o la struttura della tabella. Utile per migliorare l'usabilità del documento.
WIDTH="pixel|percent" Larghezza della tabella (in percentuale o pixel)
BORDER="int" Bordo della tabella (in pixel)
CELLSPACING="int" Spazio tra le celle (in pixel)
CELLPADDING="int" Spazio tra il bordo e il contenuto della cella (in pixel)
ALIGN=" left | center | right" Allineamento della tabella nella pagina
BGCOLOR="name|hex code" Colore di sfondo della tabella

Gli attributi principali di <tr> sono:

ALIGN="left | center | right" Allineamento orizzontale del contenuto delle celle nella tabella
VALIGN="top | middle | bottom" Allineamento verticale del contenuto delle celle nella tabella

Gli attributi principali di <td> sono:

ALIGN="left | center | right" Allineamento orizzontale del contenuto della cella
VALIGN="top | middle | bottom" Allineamento verticale del contenuto della cella
BGCOLOR="name|hex code" Colore di sfondo della cella
ROWSPAN="int" Numero di righe occupate dalla cella
COLSPAN="int" Numero di colonne occupate dalla cella

Gli attributi principali di <caption> sono:

align = "top|bottom|left|right" Specifica l'allineamento della didascalia rispetto alla tabella.