Le tabelle, insieme ai frame, permettomo di strutturare il documento in modo tale da renderne più facile la consultazione. Con il tag:
<table>
e i relativi attributi è possibile costruire tabelle
organizzate in righe e colonne, del tutto simili a quelle degli editor
di testo o dei fogli elettronici.
Per inserire le righe che compongono la tabella si usa il tag
<tr> (Table Row); all' interno
dell'elemento riga, per ciascuna colonna si ripete il tag <td> ... </td> .
Per creare celle con il testo in grassetto si usa il tag <th> (Table Header) al posto di <td>
.
<html>
<head>
<title>Le Tabelle</title>
<head> <body>
<table border>
<tr>
<td>uno</td><td>due</td>
</tr>
<tr>
<td>tre</td><td>quattro</td>
</tr>
<tr>
<td>cinque</td><td>sei</td><td>otto</td>
</tr>
</table>
</body>
</html>
<table [align="center" | "left" | "right"] [border ="n"]
[cellpadding="n"] [width="nn%"] [cellspacing="n"]> ...</table>
Con l'attributo BORDER possiamo assegnare lo spessore del bordo,
specificato da un numero: BORDER="2". Tale valore si applica solo al
bordo esterno: se si omette l'attributo la tabella non avrà
bordo.
Con l'attributo ALIGN si specifica l'allineamento della tabella.
Per ottenere bordi interni più spessi, è necessario
associare a TABLE l'attributo CELLSPACING seguito dal valore numerico
desiderato.
Per dare più spazio al testo all'interno di una singola cella
si usa CELLPADDING, seguito dal valore numerico desiderato.
Con le Netscape Extensions possiamo inserire un valore di larghezza
percentuale rispetto alla larghezza della pagina visualizzata dal
browser, si realizza con WIDTH=80%.
<tr [align="left" | "center" | "right"]
[valign="top" |"center" | "bottom"] > ... </tr>
Le righe possono essere allineate sia orizzontalmente che verticalmente.
<td [align="left" | "center" | "right"]
[valign="top" |"center" | "bottom"] [nowrap]
[colspan=n] [rowspan=n]> ... </td>
E' possibile variare il numero di celle in ogni singola riga, usando l'attributo COLSPAN seguito dal numero di colonne desiderato.
Anche l'altezza delle righe può essere variata tramite
l'attributo ROWSPAN seguito dal
numero di righe desiderato.
<html>
<head>
<title>Le Tabelle</title>
<body>
<table border="2">
<tr>
<td colspan="3" align="center">uno</td>
</tr>
<tr>
<td>tre</td><td>quattro</td><td>cinque</td>
</tr>
<tr>
<td>sei</td><td>sette</td><td>otto</td>
</tr>
</table>
</body>
</html>
<html> <head> <title>Le Tabelle</title> <body> <table border="2" align="center" cellpadding="4" cellspacing="4"> <tr> <th colspan="3" align="center">orizzontale</th> </tr> <tr> <th rowspan="2">verticale</th> <td>quattro</td><td>cinque</td> </tr> <tr> <td>sei</td><td>sette</td> </tr> </table>
</body>
</html>
Per inserire una didascalia sopra la tabella:
<caption>descrizione...</caption>
deve essere inserito subito sotto il tag <table> .
Le righe possono essere raggruppate in una delle seguenti sezioni:
<thead> </thead>
<tfoot> </tfoot>
<tbody> </tbody>
Sono utili per tabelle molto ampie che si estendono su più pagine. Le sezioni comprese in tfoot e thead vengono automaticamente riprodotte in ogni pagina, mentre della sezione compresa in tbody viene fatto lo scrolling.
Si possono raggruppare logicamente le colonne di una tabella e assegnare uno spessore predefinito:
<colgroup [span="n"] [width="n"]>...</colgroup>
span indica il numero di colonne nel gruppo.
E' possibile anche assegnare ad una colonna attributi individuali:
<col [span="n"] [width="n"]>...</col>
![]() |
![]() |
![]() |