- VOGLIAMO ESAGERARE -

Approfondimenti     -     <TABLE>
Una tabella inizierà sempre con l'elemento <TABLE> delimitatore della tabella stessa; all'interno di questo elemento sono molti gli attributi che si possono inserire, vediamoli:



ALIGN
Consente di specificarne l'allineamento con le seguenti possibilità: Center, Left e Right; rispettivamente per: al centro, a sinistra, a destra.
E' anche possibile utilizzare VALIGN per allineare il contenuto di una cella in senso verticale: alto (top), basso (bottom), centro (middle)

BACKGROUND Permette di avere un'immagine come sfondo della tabella ed è possibile applicarlo, oltre che all'elemento <TABLE>, anche agli elementi che costituiscono la struttura della tabella stessa, quali: <TD> e <TH>, descritti più avanti.
Si possono utilizzare i vari tipi di file grafici consentiti: gif, jpg, png.:



BGCOLOR
Permette di attribuire un colore in tinta unita come sfondo della tabella; il colore può essere espresso col nome in inglese o con la solita 'tripletta' di numeri esadecimali:



oppure:



BORDER
Permette di ottenere un bordo per tutte le celle della tabella ed è possibile impostarne anche lo spessore.
Alcuni browser, in mancanza di questo attributo, lasciano un piccolo spazio, pur non facendo vedere alcun bordo; per recuperare quello spazio è necessario impostare il border a zero.



(ovviamente, più il numero è alto, più lo spessore delle linee della tabella aumenta)

BORDERCOLOR
Permette di selezionare il colore del bordo; questo attributo, supportato solo da IE, per funzionare deve necessariamente avere impostato anche l'attributo border. Il colore può essere espresso con il nome in inglese o con la solita 'tripletta' di numeri esadecimali.



CELLPADDING
Specifica la quantità di spazio vuoto lasciato tra i bordi delle celle di una tabella e il loro contenuto.
Il valore per default è "1"; quindi, per tabelle più compresse, si dovrà impostare "cellpadding" uguale a "0".
Vediamo un esempio del suo utilizzo:



Aumentando il valore abbiamo:



HEIGHT
Permette di specificare l'altezza della tabella, che può essere in pixel o in percentuale dell'altezza della finestra del browser che la visualizza.



oppure:



WIDTH
Permette di specificare la larghezza della tabella, che può essere in pixel o in percentuale della larghezza della finestra del browser che la visualizza.



oppure:

<TD> ... </TD>
Questo tag definisce la cella vera e propria della tabella; molto importante per non dire indispensabile, supporta tutti gli attributi di <TABLE>; quindi, non soltanto i vari allineamenti. E' anche possibile attribuire colori o immagini di sfondo, volendo, anche diverse fra le singole celle.
Questo tag è di norma preceduto dal tag <TR> che definisce l'inizio della riga.
All'interno di una stessa tabella e delle stesse righe si dovrà definire un uguale numero di celle, a meno che non si faccia uso dell'attributo COLSPAN





E così via...
Il tutto ovviamente all'interno del tag <TABLE>
In questi esempi ho reso visibile il bordo per permettere di capirne meglio il funzionamento; molto spesso invece il bordo è impostato a zero, per utilizzare la tabella come struttura portante dei dati.
Le tabelle si possono anche 'nidificare'; cioè è possibile mettere una tabella all'interno di un'altra creando così strutture più o meno complesse, che si adattano perfettamente a qualsiasi tipo di impaginazione. Queste potrebbero addirittura contenere parti di immagini che si ricompongono cella per cella, come se si trattasse di un puzzle. Anzi, per immagini di grosse dimensioni, vengono adoperate proprio in questo modo, per evitare lunghe attese di caricamento della pagina.

<TR> ... </TR>
Questo tag definisce l'inizio di una riga della tabella. Significa che il numero di righe di una tabella è pari al numero di elementi <TR> in essa contenuti.
Supporta molti degli attributi di <TABLE> e di <TD>.
A differenza di <TD>, non contiene dati al suo interno, in quanto serve solo per creare la struttura; non hanno quindi ragione di esistere attributi quali BGCOLOR o BACKGROUND, che, se occorrono, potranno essere definiti nel tag <TD>.




COLSPAN
Consente di specificare che una cella deve estendersi per "n" colonne, precisando il numero di colonne che si intendono 'coprire'.
Ad esempio, per ottenere una cella con larghezza doppia:



ROWSPAN
Consente di specificare che una cella deve estendersi per "n" righe, precisando il numero di righe che si intendono 'coprire'.
Ad esempio, per ottenere una cella con altezza doppia:



E' da notare che la seconda riga non ha lo spazio per la sua prima colonna.


torna alla pagina precedente