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.
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:
Codice HTML corrispondente:
<table border="1">
<tr>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Es. rowspan:
Codice HTML corrispondente:
<table border="1">
<tr>
<td rowspan="2"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
Suggerimento: per creare una cella vuota utilizzare
l'entità all'interno di <td>.
<td> </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. |