HTML prevede delle estensioni che
saranno supportate completamente solo con la versione 3. Tra queste ci
sono i comandi per la gestione delle tabelle. Una tabella può essere inserita molto
facilmente in una pagina semplicemente componendola tramite un editor ed
inserendola con il comando <PRE>, che ne conserva intatta la
formattazione:
<HTML> <HEAD> <TITLE>Semplice
tabella</TITLE>
</HEAD> <BODY> <PRE> <FONT SIZE=2>
Andamento prezzi trimestrale Componente Gennaio Febbraio
Marzo ------------------------------------------ CPU 250.000
235.000 198.000 Hard Disk 470.000 436.000
421.000 </FONT> </PRE> </BODY> </HTML>
|
Andamento prezzi trimestrale
Componente Gennaio Febbraio Marzo
------------------------------------------
CPU 250.000 235.000 198.000
Hard Disk 470.000 436.000 421.000
| L'aspetto grafico di
questa tabella può essere notevolmente migliorato utilizzando il comando a
ciò predisposto: <TABLE>. Questo
comando indica il punto d'inizio dei dati che vanno inseriti nella tabella
e prevede di essere chiuso alla fine dei dati stessi. Accetta inoltre un
parametro BORDER che specifica lo
spessore del bordo della tabella. Vediamo allora come si può
implementare la stessa tabella tramite il comando <TABLE>:
Andamento prezzi
trimestrale
Componente |
Gennaio |
Febbraio |
Marzo |
CPU |
250.000 |
235.000 |
198.000 |
Hard Disk |
470.000 |
436.000 |
421.000 | Il
relativo codice è il seguente:
<HTML> <HEAD> <TITLE>Semplice tabella
</TITLE></HEAD> <BODY> <TABLE
BORDER=3> <CAPTION><FONT SIZE=4> Andamento prezzi
trimestrale</FONT></CAPTION> <TR><TH>Componente<TH>Gennaio<TH>Febbraio<TH>Marzo <TR><TH
ALIGN=CENTER>CPU<TD ALIGN=RIGHT> 250.000<TD
ALIGN=RIGHT> 235.000<TD ALIGN=RIGHT>
198.000 <TR><TH ALIGN=CENTER>Hard Disk<TD
ALIGN=RIGHT> 470.000<TD ALIGN=RIGHT> 436.000<TD
ALIGN=RIGHT>
421.000 </TABLE> </BODY> </HTML>
|
Prima di vedere i singoli comandi per la gestione della tabella a quale
scopo sono predisposti, vogliamo presentare un altro esempio in cui si
utilizzano delle intestazioni che coprono due o più colonne/righe:
Prezzi ultimo
mese
|
Prezzo |
IVA |
normale |
scontato |
CPU |
250.000 |
235.000 |
19% |
Hard Disk |
450.000 |
435.000 |
19% | Il
sorgente per questa tabella è il seguente:
<HTML> <HEAD> <TITLE> Semplice tabella
</TITLE></HEAD> <BODY> <TABLE
BORDER=3> <CAPTION><FONT SIZE=4> Prezzi ultimo
mese</FONT></CAPTION> <TR><TH
ROWSPAN=2><TH
COLSPAN=2>Prezzo<TH>IVA <TR><TH>normale<TH>scontato <TR><TH
ALIGN=CENTER> CPU <TD ALIGN=RIGHT> 250.000<TD
ALIGN=RIGHT> 235.000<TD ALIGN=RIGHT>
19% <TR><TH ALIGN=CENTER> Hard Disk <TD
ALIGN=RIGHT> 450.000<TD ALIGN=RIGHT> 435.000<TD
ALIGN=RIGHT>
19% </TABLE> </BODY> </HTML>
|
Non c'è a questo punto bisogno di puntualizzare la maggiore versatilità ed
efficacia che si ottiene tramite il comando <TABLE>!
Passiamo dunque ad analizzare la funzionalità di ogni comando:
CAPTION Inserito all'inizio della
tabella permette di darle una didascalia. Il comando va chiuso tramite
</CAPTION>.
TR Inizia una nuova RIGA della
tabella. Va inserito ad ogni cambio riga.
TH Inizia una nuova COLONNA,
fornendone l'intestazione, che verrà visualizzata con uno stile in
maggiore evidenza rispetto ai dati della tabella.
TD Nuova casella DATI.
Specificando in sequenza vari comandi <TD> con i relativi dati si
introducono consecutivamente tutte le celle di una stessa riga. Per
passare alla riga successiva si usi il comando <TR>.
Il comando TABLE può avere i seguenti attributi:
- WIDTH Specifica la larghezza
della tabella, in pixel o in percentuale rispetto alla finestra del
browser.
- HEIGHT Specifica l'altezza.
- ALIGN Specifica l'allineamento
del contenuto delle celle.
- VALIGN Ne specifica
l'allineamento verticale rispetto ai bordi delle celle.
- BGCOLOR Definisce, con le solite
modalità (BGCOLOR="#rrggbb"), il colore di sfondo della tabella.
- BORDERCOLOR Definisce il colore
che dovranno avere i bordi.
- BORDERCOLORDARK Specifica il
colore della parte illuminata dei bordi (effetto 3D). Solo Internet
Explorer.
- BORDERCOLORLIGHT Specifica il
colore della parte buia dei bordi (effetto 3D). Solo Internet Explorer.
- BORDER Specifica la larghezza
del bordo esterno della tabella; "0" per non avere bordi.
- CELLPADDING Serve per imporre un
contorno interno alle celle che deve essere lasciato vuoto.
- CELLSPACING Impone la distanza
fra le celle, ovvero la larghezza dei bordi interni.
I comandi <TR>, <TH> e <TD> possono comprendere una
serie di parametri:
- ALIGN Permette di specificare
l'allineamento dei dati all'interno di una cella. Può assumere i valori
RIGHT (per l'allineamento a destra), LEFT (per l'allineamento a
sinistra) e CENTER (per la centratura nella casella). Se utilizzato con
il comando <TR> permette di associare un allineamento a tutti gli
elementi di una stessa riga. Il default è LEFT per le celle dati e
CENTER per le celle d'intestazione.
- VALIGN Funziona esattamente come
ALIGN, ma permette di stabilire l'allineamento verticale dei paragrafi
nelle celle. I valori accettati sono TOP (allineamento in alto), MIDDLE
(centratura) e BASELINE (allineamento in basso). Il default è CENTER per
tutte le celle.
- COLSPAN Controlla il numero di
colonne su cui una cella si può estendere. Utilizzandolo insieme a
ROWSPAN è possibile creare delle celle larghe 2 o piu' righe/colonne.
- ROWSPAN Definisce il numero di
righe su cui incide la casella.
- HEIGHT Definisce l'altezza della
cella, o dell'intera tabella.
- WIDTH Definisce la larghezza
della cella, o dell'intera tabella.
- NOWRAP Indica che il testo
contenuto nella cella non dovrà essere spezzato su più linee.
- BGCOLOR Specifica quale deve
essere il colore dell'intera tabella, o della riga, o della singola
cella.
- BORDERCOLOR Specifica il colore
che devono avere i bordi.
- BACKGROUND Attributo
riconosciuto solo da Internet Explorer, serve per specificare una
immagine da utilizzare come sfondo.
Dopo aver letto il
significato di questi comandi e dei relativi parametri tornate a dare
un'occhiata al codice HTML della tabella precedente per capirne bene il
significato. Vedrete che con poche prove è possibile creare tabelle di
notevole effetto.
Le celle della tabella possono contenere
un qualsiasi elemento HTML: testo, immagini, collegamenti. Utilizzando la
tabella è quindi possibile, ad esempio, creare una griglia di pulsanti
come quella utilizzata in questa guida per l'indice generale, in cui sono
inserite immagini accanto al testo, ed il tutto rappresenta un
collegamento all'opportuna sezione.
E' molto importante
notare che il comando <TABLE> va chiuso con il comando
</TABLE> alla fine della tabella. Se così non viene fatto è molto
probabile che il browser non riesca ad interpretare correttamente la
vostra pagina e la visualizzi completamente alterata.
***
ATTENZIONE *** Il comando TABLE è in effetti molto potente, ma
anche molto "delicato": oltre a verificare la corretta sintassi, in
particolare la chiusura, bisogna stare attenti all'utilizzo delle TABLE
insieme ad altri comandi, come ad esempio quelli non ancora
definitivamente standardizzati, fra i quali le TABLE stesse (provate ad
inserire un oggetto di tipo "SELECT" o "SELECT MULTIPLE" di una FORM
all'interno di una TABLE...!). Questo tipo di inconveniente dovrebbe
essere eliminato con versioni future dei browser e con la definizione
dello standard.
Un'altra cosa interessante, è la possibilità
di nidificare le TABLE: una cella può contenere a sua volta un'altra
TABLE. Controllate però, come sempre, se le cose funzionano... e
ricordatevi che se da voi va tutto bene non è detto che sia così anche con
altri browser!
Infine una piccola applicazione: per generare
una cornice intorno ad un testo che si vuole evidenziare (come qui fatto
per i listati HTML) si può utilizzare il bordo di una tabella inserendo
tutto il testo in una sola cella.
|