11. Tabelle
Cenni di base
Le tabelle sono molto utili per impaginare del testo che incolonnato tabellarmente o per realizzare delle visualizzazioni di testo od
immagini in aree predefinite dello schermo.
Nei documenti precedenti avete già visto degli esempi di tabelle, principalmente quando vengono presentati degli esempi di codice HTML in
una finestrella centrata nello schermo.
Un classico esempio di tabella è il classico elenco telefonico:
|
Nominativo
|
Telefono
|
|
Mario Rossi
|
06/010200 0
|
|
Antonio Bianchi
|
06/030930 0
|
|
Giuseppe Verdi
|
06/032442 3
|
|
Fabio Viola
|
06/003544 9
|
|
Il codice HTML per realizzare la tabella di cui sopra è il seguente:
|
<TABLE BORDER=2>
<TR>
<TD>Nominativo</TD>
<TD>Telefono</TD>
</TR>
<TR>
<TD>Mario Rossi</TD>
<TD>06/0102000</TD>
</TR>
<TR>
<TD>Antonio Bianchi</TD>
<TD>06/0309300</TD>
</TR>
<TR>
<TD>Giuseppe Verdi</TD>
<TD>06/0324423</TD>
</TR>
<TR>
<TD>Fabio Viola</TD>
<TD>06/0035449</TD>
</TR>
</TABLE>
|
|
chiaramente, come noto, il tutto per funzionare correttamente deve essere all'interno di una
sezione <BODY> di un documento HTML strutturato come descritto in precedenza.
In sostanza, la tabella viene inziata e terminata dai tag <TABLE></TABLE>.
Notate che il comando <TABLE> ha un attributo: BORDER. Tale attributo indica se la tabella
deve essere bordata <BORDER="x"> dove x è il numero dei pixel, oppure se non deve averne <BORDER="0">.
Tra di essi, deve essere indicata quella porzione di testo che farà parte delle righe dalla tabella, mediante i tag <TR></TR>.
In questa maniera già abbiamo definito l'inizio e fine della tabella e le righe di sui sarà composta.
All'interno dei tag <TR></TR> dovranno essere inseriti tanti tag <TD>contenuto</TD> per
ogni colonna o cella che deve essere visualizzata. Il contenuto può essere costiutito da qualsiasi comando HTML idoneo ad essere inserito in una tabella, o addirittura può essere
un'altra tabella all'interno di una cella. Pertanto, per ogni cella può essere formattato a piacere il testo, possono essere inserite immagini, suoni ecc.
Ecco un esempio di tabella nidificata con immagini.
|
<TABLE BORDER=2>
<TR>
<TD>Cella 1
<TABLE BORDER=2>
<TR>
<TD>Cella 1.1</TD>
<TD>Cella 1.2</TD>
</TR>
<TR>
<TD>Cella 2.1</TD>
<TD>Cella 2.2</TD>
</TR>
</TABLE>
<TD>Cella 2</TD>
</TR>
<TR>
<TD>Cella 3</TD>
<TD>Cella 4<IMG SRC="citta.jpg"></TD>
</TR>
</TABLE>
|
|
Vedete come nella cella 1 è stata inserita un'altra tabella di 2x2 e nella cella 4 un'immagine
Notate che il comando <TABLE> ha un attributo: BORDER. Tale attributo indica se la tabella
deve essere bordata <BORDER="x"> dove x è il numero dei pixel, oppure se non deve averne <BORDER="0">.
Comandi
- <TABLE>
- Abbiamo visto come funziona il comando, ora analizziamo i suoi attributi.
- WIDTH="x"
dove "x" è una misura in pixel o in percentuale rispetto alla
finestra (per quest'ultima si deve far seguire al numero il segno %) che specifica la larghezza della tabella.
- HEIGHT ="x"
come sopra, relativamente all'altezza.
- ALIGN = "CENTER|LEFT|RIGHT"
Specifica che il testo/grafica contenuto nelle celle deve essere
allineato al centro, a destra o a sinistra.
- VALIGN = "TOP|MIDDLE|BOTTOM"
Specifica l'allineamento verticale delle celle rispetto ai bordi
superiore ed inferiore.
- BGCOLOR = "#RRGGBB"
BORDERCOLOR = "#RRGGBB"
Specificano rispettivamente il colore dello sfondo e dei bordi della tabella.
- BORDER = "x"
Specifica la larghezza in pixel del bordo della tabella.
- CELLPADDING = "x"
Specifica una distanza in pixel che il browser deve lasciare tra i
bordi della cella e ciò che deve esservi visualizzato.
- CELLSPACING = "x"
Definisce lo spazio che deve essere lasciato tra le celle che, in
pratica, identifica il bordo interno della tabella
-
- <CAPTION ALIGN="TOP|BOTTOM">
- Deve essere inserito dopo il comando <TABLE></TABLE> e prima del primo <TD> ed è
utilizzato per dare un'intestazione (o didascalia) alla tabella che può essere inserita in testa (TOP) od in fondo (BOTTOM) ad essa.
Elementi interni della Tabella
- <TR></TR>
- Indica che il testo al suo interno è una riga della tabella
- <TD></TD>
- Indica che il testo al suo interno è una cella della tabella
- <TH></TH>
Indica che il testo contenuto è una intestazione di colonna della tabella e sarà
visualizzato con un carattere evidenziato rispetto alle altre celle.
- Parametri
- WIDTH="x"
dove "x" è una misura in pixel o in percentuale rispetto alla tabella (per
quest'ultima si deve far seguire al numero il segno %) che specifica la larghezza della cella
- HEIGHT ="x"
come sopra, relativamente all'altezza.
- ALIGN = "CENTER|LEFT|RIGHT"
Specifica che il testo/grafica contenuto nella riga/cella deve essere allineato al
centro, a destra o a sinistra.
- VALIGN = "TOP|MIDDLE|BOTTOM"
Specifica l'allineamento verticale della riga/cella rispetto ai bordi superiore ed
inferiore.
- COLSPAN = "x"
Definisce che una cella puà allargarsi a comprendere più colonne, come ad
esempio quando in una tabella di Word si esegue il comando "Unisci Cella".
- ROWSPAN = "x"
Definisce che una cella può allargarsi a comprendere più righe.
- NOWRAP
Obbliga il browser che deve visualizzare il testo su una sola riga e cioè che non
deve applicare il Wordwrap automatico.
- BGCOLOR = "#RRGGBB"
BORDERCOLOR = "#RRGGBB"
Specificano rispettivamente il colore dello sfondo e dei bordi della cella.
   
|
