|
|
Tabelle |
|
Le tabelle di Html permettono di inserire all'interno delle singole celle tutti gli strumenti a disposizione dell'Html: parole, immagini, video, links, etc.
L'utilizzo di una tabella rende possibile l'unione di vari elementi in una zona delimitata della pagina.
Il tag che identifica una tabella è: <TABLE></TABLE>. All'interno di tale tag, si inserisce il comando BORDER, che permette di decidere lo spessore, in pixel, del bordo della tabella; il valore da attribuire a BORDER parte dallo "0" (nessun bordo) in poi.
All'atto della costruzione, possiamo scegliere di quante righe e quante colonne comporre la nostra tabella. Per quanto riguarda le righe, queste vengono identificate dai tags <TR></TR>,all'interno dei quali vengono inserite le colonne con i tags <TD></TD>.
esempio:
| CODICE HTML | RISULTATO | ||||||
| <TABLE
BORDER=1> <TR> <TD>riga1 colonna1</TD> <TD>riga1 colonna2</TD> </TR> <TR> <TD>riga2 colonna1</TD> <TD>riga2 colonna2</TD> </TR> <TR> <TD>riga3 colonna1</TD> <TD>riga3 colonna2</TD> </TR> |
|
NOTA: In questo esempio, forse non tutti se ne sono resi conto, è stata inserita una tabella (quella con bordo=1) all'interno della cella di riga2 e colonna2 di un'altra tabella con bordo=0.
All'interno dei tags <TD></TD> sono validi tutti i tags già descritti per testo, immagini, etc.
E' possibile stabilire preventivamente le dimensioni (in pixel o percentuale) della tabella con i comandi, già descritti, WIDTH (per le dimensioni orizzontali) e HEIGHT (per le dimensioni verticali), che verranno situati all'interno dei tags <TABLE> e <TD>.
Un'altra caratteristica delle tabelle è data dalla possibilità di poter scegliere:
esempio: <TABLE BORDER="1" CELLPADDING="8"> ...... </TABLE>
la spaziatura tra le celle, tramite il comando CELLSPACING (in pixel).
esempio: <TABLE BORDER="1" CELLSPACING="6"> ...... </TABLE>
Per quanto riguarda il testo da inserire all'interno delle singole celle, oltre a valere le regole già descritte nel capitolo Testo e caratteri, esiste la possibilità di allineare lo stesso in relazione alla cella. I comandi da utilizzare all'interno del tag <TD> sono:
ALIGN : permette l'allineamento orizzontale del testo:
| - | ALIGN="left" : il testo viene allineato sulla sinistra della cella | |
| - | ALIGN="center" : il testo viene allineato al centro della cella | |
| - | ALIGN="right" : il testo viene allineato sulla destra della cella |
| Left | Center | Right |
VALIGN : permette l'allineamento verticale (vertical align) del testo:
| - | VALIGN="top" : il testo viene allineato nella parte superiore della cella | |
| - | VALIGN="middle" : il testo viene allineato nella parte intermedia della cella | |
| - | VALIGN="bottom" : il testo viene allineato nella parte inferiore della cella |
| Top | Middle | Bottom |
Le tavole rappresentano uno strumento così versatile, al punto di permetterci di decidere di che colore vogliamo le singole celle o, addirittura, autorizzano l'immissione di un'immagine come sfondo; i comandi utilizzati sono:
BGCOLOR : inserisce un colore (in esadecimale o con la parola inglese) e va inserito all'interno del tag <TD>.
esempio: <TD BGCOLOR="red">
BACKGROUND : utilizza un'immagine .gif o .jpg come sfondo di una cella.
esempio: <TD BACKGROUND="immagine.gif">
Nella tabella seguente sono riportati i due esempi appena descritti:
| Sfondo rosso | Sfondo verde |
| Sfondo blu | Sfondo immagine |
ALTRI COMANDI
Quando si costruisce una tabella, può capitare di dover inserire un titolo di descrizione dei dati in essa contenuti. Per far ciò, si introduce tra il tag <TABLE> ed il primo <TR> il nuovo tag:
<CAPTION ALIGN="top">Titolo della tabella</CAPTION>.
Un' altra particolarità è data dalla possibilità di fondere due o più caselle adiacenti di una tabella in un'unica cella. Ciò è possibile grazie al comando COLSPAN="n" (n rappresenta il numero di caselle interessate alla fusione in un'unica cella), che viene posizionato all'interno del tag <TD> della casella d'interesse (quella più a sinistra), dopodiché non dovranno essere inserite le altre caselle interessate a tale fusione.
Scrivendo per esempio il seguente codice:
<table
border="2" cellpadding="2"
cellspacing="0" width="400">
<caption align="top">Titolo della
tabella</caption>
<tr>
<td align="center" colspan="2">Cella
doppia</td>
<td align="center" colspan="2">Cella
doppia</td>
<td align="center" colspan="2">Cella
doppia</td>
</tr>
<tr>
<td align="center">Cella</td>
<td align="center">Cella</td>
<td align="center">Cella</td>
<td align="center">Cella</td>
<td align="center">Cella</td>
<td align="center">Cella</td>
</tr>
<tr>
<td align="center">Cella</td>
<td align="center">Cella</td>
<td align="center">Cella</td>
<td align="center">Cella</td>
<td align="center">Cella</td>
<td align="center">Cella</td>
</tr>
<tr>
<td align="center" colspan="2">Cella
doppia</td>
<td align="center" colspan="2">Cella
doppia</td>
<td align="center" colspan="2">Cella
doppia</td>
</tr>
</table>
si avrà come risultato:
| Cella doppia | Cella doppia | Cella doppia | |||
| Cella | Cella | Cella | Cella | Cella | Cella |
| Cella | Cella | Cella | Cella | Cella | Cella |
| Cella doppia | Cella doppia | Cella doppia | |||
Per raggiungere lo stesso scopo, ma con celle della stessa colonna, basta utilizzare il comando ROWSPAN="n" al posto di COLSPAN.
 |
|
|
