WMPortal
a- a+

I tags td e tr

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

Iniziamo con le dimensioni, molto semplice: valgonole stesse considerazioni effettuate per il tag <TABLE>,quindi mi limiterò solo ad inserire nuovi esempisicuramente 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 allaprecedente tabella sta ad indicare la percentuale di schermoche voglio che questa occupi. Una volta definita ladimensione "globale" della tabella èpossibile attribuire alle celle valori che, sommati, occupinotutto 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 attributirowspan e colspan ci permettono di fare in modoche una cella occupi più di una riga o più diuna 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 siacontenuto in una cella) in svariati modi usando i parametrialign (per l'allineamento orizzontale) evalign (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 unnuovo comando: il th. Questo si usa al posto deltd se si intende "evidenziare" il testocontenuto in una cella. E' da notare, infatti, come iltesto contenuto nella prima riga e nella prima colonna appaiain grassetto, proprio come se avessimo usato un heading,mentre in effetti (come risulta evidente dalla sintassi) nonabbiamo agito in alcun modo sugli attributi delcarattere.
La cella vuota è stata generata da<td></td> che si espande, in base a quanto dettoin precedenza, in funzione della larghezza della colonna edell'altezza della riga a cui appartiene.

All'interno di ogni cella possiamo, ovviamente, metteretutto 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

 

I colori di sfondo delle celle possono essere riempiti siacon un colore a "tinta unita" che con una immagine,il colore viene inserito con il parametro bgcolor:

<TDBGCOLOR="#RRGGBB">

...mentre l'immagine va inserita con l'attributobackground:

<TDBACKGROUND="directory/immagine.jpg">

parametri già visti entrambi nel tag<BODY>.

Ecco gli esempi:
 

    <TABLE BORDER="1" WIDTH="80%" ALIGN="Center"><TD WIDTH="25%" BGCOLOR="#FF4040">#FF4040</TD><TD WIDTH="25%" BGCOLOR="#FF80FF">#FF80FF</TD><TD WIDTH="25%" BGCOLOR="#00C0C0">#00C0C0</TD><TD WIDTH="25%" BGCOLOR="#00FFFF">#00FFFF</TD></TABLE>