Le tabelle sono una delle parti più importanti di tutto il codice HTML:
nate sin dagli inizi del Web per impaginare dati aggregati, si sono poi trasformate
in uno strumento indispensabile per gestire i layout grafici.
Il loro ampio utilizzo all’interno dei documenti ha fatto sì che
– nel passaggio dall’HTML 3.2 all’HTML 4 - le specifiche delle
tabelle venissero estese con una serie di notazioni destinate a “far ordine”
all’interno di un codice che rischiava di diventare troppo vasto.
Immaginiamo la nostra prima tabella come una griglia formata da righe e colonne.
I tag necessari per creare una tabella sono:
<table>
| apre la tabella |
<tr> |
“table row”: indica
l’apertura di una riga
|
<td> |
“table data”: indica
una cella all’interno di una riga |
In questi nostri primi esempi presupponiamo che il numero delle celle all’interno
di ciascuna riga sia costante: ogni riga avrà cioè lo stesso numero
di celle. Ci sono dei metodi per variare il numero delle celle all’interno
di una riga, ma li vedremo in seguito.
L’attributo border permette di specificare di quanti
pixel deve essere il bordo delle tabelle. Ad esempio:
<table border=”2”>
Lo useremo in questi esempi, altrimenti non percepiremmo la struttura di quanto
stiamo costruendo. Ecco un primo esempio di tabella:
<table border="1>
<tr>
<td>prima cella</td>
<td>seconda cella</td>
</tr>
<tr>
<td>terza cella</td>
<td>quarta cella</td>
</tr>
</table>
Che viene visualizzato così:
prima cella |
seconda cella |
terza cella |
quarta cella |
Possiamo specificare la larghezza e l'altezza delle tabelle tramite gli attributi
width e height che possono essere riferiti
a tutti e tre i tag (<table>, <tr>,
<td>). Il valore di questi attributi può essere
specificato con una larghezza fissa (in pixel: in questo caso basta indicare
un numero intero), oppure in percentuale (il numero deve essere allora seguito
dal simbolo “%”): in questo caso la tabella 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>
Che viene visualizzato così:
prima cella |
seconda cella |
terza cella |
quarta cella |
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ì:
prima cella |
seconda cella |
terza cella |
quarta cella |
Di solito la larghezza e l’altezza globali della tabella sono espresse nel
tag <table>, mentre la larghezza delle varie celle viene
espressa nei <td> della prima riga. L’altezza in
percentuale non sempre è visualizzata correttamente da tutti i browser.
Come detto inizialmente le tabelle vanno immaginate come delle griglie, tutto
sommato abbastanza rigide: l’eventuale larghezza specificata nelle celle
della prima riga avrà effetto dunque anche sulle celle delle righe sottostanti.
Viceversa non è possibile variare arbitrariamente le dimensioni delle
celle: le misure specificate nelle righe sottostanti non avranno infatti effetto,
come si può vedere nell’esempio
allegato, che non è corretto.
Le dimensioni espresse non devono tuttavia essere in contraddizione ma mano
che si procede verso l’interno della tabella: in un caso simile infatti
“vincerebbe” il valore specificato nel tag genitore, come si può
vedere nella pagina di esempio.
Inoltre (come si evince dagli esempi) la visualizzazione dei layout con indicazioni
non corrette è a discrezione del browser, quindi si rischia di ottenere
risultati diversi da quelli voluti.