TABELLE - I tags <TD> e <TR>

<TD> e </TD>, come si è già accennato, sono i TAGs che specificano l'inizio e la fine di una singola cella.
Ogni cella possiede determinati attributi alcuni dei quali, come si è detto nella prima parte, se non specificati vengono espressi con determinati valori predefiniti.
In questo paragrafo impareremo sia a modificare questi ultimi che ad aggiungerne altri (più legati alla forma che alla sostanza a dire il vero).

Iniziamo con le dimensioni, molto semplice: valgono le stesse considerazioni effettuate per il tag <TABLE>, quindi mi limiterò solo ad inserire nuovi esempi sicuramente più eloquenti di mille parole:

PRIMO ESEMPIO <table border=1 width=75%> <td width=20%>20%</td> <td width=50%>50%</td> <td width=15%>15%</td> <td width=15%>15%</td> </table> 20% 50% 15% 15%

Mi preme far convergere la vostra attenzione su un punto, quindi attenzione.
E' bene notare che il 75% che ho attribuito alla precedente tabella sta ad indicare la percentuale di schermo che voglio che questa occupi. Una volta definita la dimensione "globale" della tabella è possibile attribuire alle celle valori che, sommati, occupino tutto lo spazio dedicato alla tabella e che sono, pertanto, il 100% rispetto alla tabella e, in questo caso, il 75% rispetto allo schermo.

SECONDO ESEMPIO <table border=1 width=300> <td width=30>30</td> <td width=60>60</td> <td width=90>90</td> <td width=120>120</td> </table> 30 60 90 120

Da adesso in poi andiamo più veloci. Gli attributi rowspan e colspan ci permettono di fare in modo che una cella occupi più di una riga o più di una colonna (essendo il valore 1 quello predefinito).

<table border=1> <tr> <td>1</td> <td>2</td> <td>3</td> <tr> <td>4</td> <td rowspan=2 colspan=2> Questa cella si espande per 2 righe e 2 colonne! </td> <tr> <td>5</td> </table> 1 2 3 4 Questa cella si espande per 2 righe e 2 colonne! 5

E' possibile allineare il testo (o quant'altro sia contenuto in una cella) in svariati modi usando i parametri align (per l'allineamento orizzontale) e valign (per quello verticale):

<table border=1> <tr> <td></td> <th colspan=3>Gli Attributi che regolano l'allineamento <br> Align e VAlign</th> <tr> <th>Allineamento<br>Verticale</th> <td valign=top>In alto</td> <td valign=middle>Al centro</td> <td valign=bottom>In basso</td> <tr> <th>Allineamento<br>Orizzontale</th> <td align=left>A sinistra</td> <td align=center>Al centro</td> <td align=right>A destra</td> </table> Gli Attributi che regolano l'allineamento Align e VAlign Allineamento Verticale In alto Al centro In basso Allineamento Orizzontale A sinistra Al centro A destra

...in quest'ultima tabella abbiamo anche inserito un nuovo comando: il th. Questo si usa al posto del td se si intende "evidenziare" il testo contenuto in una cella. E' da notare, infatti, come il testo contenuto nella prima riga e nella prima colonna appaia in grassetto, proprio come se avessimo usato un heading, mentre in effetti (come risulta evidente dalla sintassi) non abbiamo agito in alcun modo sugli attributi del carattere.
La cella vuota è stata generata da <td></td> che si espande, in base a quanto detto in precedenza, in funzione della larghezza della colonna e dell'altezza della riga a cui appartiene.

All'interno di ogni cella possiamo, ovviamente, mettere tutto ciò che ci passa per la testa...

Immagini	Torna all'indice Riferimenti
Ovviamente tutto il testo che volete!	Altre tabelle 1 2 3 4 5 6