Le Tabelle
<TABLE>...</TABLE>
Una tabella inizierà sempre con questo 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 centrato, a sinistra, a destra.
BACKGROUND
Permette di avere un'immagine come sfondo della tabella, è 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 avere un colore in tinta unita come sfondo della tabella, il colore può essere espresso col suo nome in lingua inglese o con la solita tripletta di numeri esadecimali.
BORDER
Permette di avere un bordo perimetrale che contorna tutte le celle facenti parte della tabella; è 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.
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 col suo nome in lingua inglese o con la solita tripletta di numeri esadecimali.
BORDERCOLORDARK
Permette di selezionare il colore più scuro su un bordo (l'opposto di BORDERCOLORLIGHT); creando un effetto di luce. Questo attributo supportato soltanto da IE per funzionare deve necessariamente avere impostato anche l'attributo border, il colore può essere espresso col suo nome in lingua inglese o con la solita tripletta di numeri esadecimali.
BORDERCOLORLIGHT
Permette di selezionare il colore più chiaro su un bordo (l'opposto di BORDERCOLORDARK); creando un effetto di luce. Questo attributo supportato solo da IE per funzionare deve necessariamente avere impostato anche l'attributo border, il colore può essere espresso col suo nome in lingua 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 dato vero e proprio in esse contenuto, il valore per default è 1 , quindi per tabelle più compresse si dovrà impostare cellpadding uguale a zero.
CELLSPACING
Specifica la quantità di spazio vuoto da lasciare tra le singole celle di dati di una tabella, il valore per default è 2, per tabelle più compresse si dovrà impostare cellspacing uguale a zero .
FRAME
Permette di scegliere quale tipo di visualizzazione assegnare al bordo. Questo attributo supportato dal solo IE, per funzionare deve avere impostato l'attributo border. I valori possibili sono:
void = rimuove tutti i bordi esterni
above = visualizza solo i bordi esterni in cima alla tabella
below = visualizza solo i bordi esterni in fondo alla tabella
hsides = visualizza solo i bordi orizzontali in cima e in fondo alla tabella
lhs = visualizza i bordi esterni solo al margine sinistro della tabella
rhs = visualizza i bordi esterni solo al margine destro della tabella
vsides = visualizza i bordi esterni ai due margini destro e sinistro della tabella
box = visualizza un riquadro attorno alla tabella (tutti i margini)
border = visualizza un riquadro attorno alla tabella (come box)
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.
Provate a variare le dimensioni della vostra finestra, quella in cui state vedendo questa pagina, vedrete che anche l'altezza della tabella varia mantenendo il 10% di visualizzazione specificato.
RULES
Serve per la visualizzazione dei bordi interni quando si fa uso dei tags <THEAD> <TBODY> e <TFOOT>, tutti questi attributi sono supportati dai soli browser IE per funzionare deve essere necessariamente impostato anche l'attributo border. I valori possibili sono:
none = rimuove tutti i bordi esterni
basic = visualizza bordi orizzontali fra le sessioni <THEAD><TBODY><TFOOT>
rows = visualizza bordi orizzontali tra ciascuna riga
cols = visualizza bordi orizzontali tra cisacuna colonna
all = visualizza tutti i bordi interni
WIDTH
Permette di specificare la larghezza della tabella, che può essere in pixel o in percentuale dell'altezza della finestra del browser che la visualizza. Provate a variare le dimensioni della vostra finestra, quella in cui state vedendo questa pagina, vedrete che anche l'altezza della tabella varia mantenendo il 50% di visualizzazione specificato.
<CAPTION>...</CAPTION>
L'elemento <CAPTION> rappresenta la didascalia della tabella, deve trovarsi all'interno della tabella ma non all'interno di righe o di celle.
ALIGN
L'attributo ALIGN controlla se la didascalia deve essere sovrapposta o restare sullo sfondo a seconda che si assegni il valore TOP o BOTTOM. Per default questo valore è TOP. IE consente anche un allineamento verticale col l'attributo VALIGN. Gli altri valori possibili oltre a TOP e BOTTOM sono LEFT, CENTER, RIGHT.
VALIGN
Permette di specificare l'allineamento verticale del testo visualizzato nelle celle di una tabella, per default questo valore è centrato, questo tipo di attributo è supportato soltanto da IE.
<COL>...</COL>
Serve per specificare l'allineamento del testo per le colonne della tabella, questo TAG è supportato soltanto da IE.
<COLGROUP>...</COLGROUP>
Serve per raggruppare alcune colonne in modo da impostarne le relative proprietà di allineamento, questo TAG è supportato soltanto da IE ed accetta i seguenti attributi:
ALIGN = center, justify, left, right. per default è impostato center
SPAN = valore. Imposta il numero di colonne su cui agire con ALIGN e VALIGN
VALIGN = baseline, bottom, middle, top. Imposta l'allineamento verticale del testo
<TBODY>...</TBODY>
Questo elemento supportato soltanto da IE serve per specificare la sezione del corpo della tabella, è analogo all'elemento <BODY> di html ed influenza direttamente la visualizzazione della tabella stessa.
<TD>...</TD>
Questa coppia di tags definiscono 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 ma è possibile avere anche colori o immagini di sfondo, volendo anche diverse fra le singole celle. Attenzione però, a differenza di table è possibile adoperare anche l'attributo NOWRAP, che se presente impedisce il ritorno a capo del contenuto della cella, forzando questa a mantenere le dimensioni necessarie per contenere tutto il testo su una sola riga. Questo tag è di norma preceduto dal tag TR che definisce l'inizio della riga. All'interno di una stessa tabella e delle stesse singole righe si dovranno definire lo stesso identico numero di celle, a meno che non si faccia uso dell'attributo COLSPAN. E così via... Il tutto ovviamente all'interno dei tags <TABLE> e </TABLE> Ho reso visibile il bordo per permettere di capirne meglio il funzionamento, molto spesso invece il bordo è impostato a zero in modo da usare la tabella solo come struttura portante dei dati. Le tabelle si possono nidificare, cioè è possibile mettere delle tabelle all'interno di altre tabelle creando così strutture più o meno complesse che si adattano prfettamente a qualsiasi tipo di impaginazione voluta. 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 a questo modo per non creare lunghe attese di caricamento.
<TFOOT>...</TFOOT>
Questo elemento supportato soltanto da IE, serve per specificare la sezione del piede della tabella.
<TH>...</TH>
Questo tag definisce la cella intestazione della tabella, significa che il testo all'interno di questo tag sarà in neretto,supporta tutti gli attributi di TABLE e di TD. Attenzione all'attributo NOWRAP, se presente impedisce il ritorno a capo del contenuto della cella forzando questa a mantenere le dimensioni necessarie per contenere tutto il testo su una sola riga. Necessita di essere racchiuso fra i tags <TR> </TR> esattamente cone TD
<THEAD>...</THEAD>
Questo elemento ad uso dei soli browser IE è utilizzato per specificare la sezione di intestazione della tabella. E' simile all'elemento HEAD di html.
<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 all'interno di TR stesso.
ROWSPAN e COLSPAN
Come già accennato, le tabelle, salvo casi particolari, hanno un numero di celle uguale per ogni riga ed un numero di righe pari ad ogni serie di celle. Se non si potesse intervenire diversamente, questo le renderebbe piuttosto rigide e forse poco utilizzabili dal lato pratico. Gli attributi COLSPAN e ROWSPAN servono proprio a spezzare questa regola e dare la possibilità di modificarle a proprio piacimento, si tratta di avere le idee chiare su come dovrà essere fatta questa tabella, prima di passare alla sua realizzazione.
Una tabella inizierà sempre con questo 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 centrato, a sinistra, a destra.
BACKGROUND
Permette di avere un'immagine come sfondo della tabella, è 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 avere un colore in tinta unita come sfondo della tabella, il colore può essere espresso col suo nome in lingua inglese o con la solita tripletta di numeri esadecimali.
BORDER
Permette di avere un bordo perimetrale che contorna tutte le celle facenti parte della tabella; è 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.
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 col suo nome in lingua inglese o con la solita tripletta di numeri esadecimali.
BORDERCOLORDARK
Permette di selezionare il colore più scuro su un bordo (l'opposto di BORDERCOLORLIGHT); creando un effetto di luce. Questo attributo supportato soltanto da IE per funzionare deve necessariamente avere impostato anche l'attributo border, il colore può essere espresso col suo nome in lingua inglese o con la solita tripletta di numeri esadecimali.
BORDERCOLORLIGHT
Permette di selezionare il colore più chiaro su un bordo (l'opposto di BORDERCOLORDARK); creando un effetto di luce. Questo attributo supportato solo da IE per funzionare deve necessariamente avere impostato anche l'attributo border, il colore può essere espresso col suo nome in lingua 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 dato vero e proprio in esse contenuto, il valore per default è 1 , quindi per tabelle più compresse si dovrà impostare cellpadding uguale a zero.
CELLSPACING
Specifica la quantità di spazio vuoto da lasciare tra le singole celle di dati di una tabella, il valore per default è 2, per tabelle più compresse si dovrà impostare cellspacing uguale a zero .
FRAME
Permette di scegliere quale tipo di visualizzazione assegnare al bordo. Questo attributo supportato dal solo IE, per funzionare deve avere impostato l'attributo border. I valori possibili sono:
void = rimuove tutti i bordi esterni
above = visualizza solo i bordi esterni in cima alla tabella
below = visualizza solo i bordi esterni in fondo alla tabella
hsides = visualizza solo i bordi orizzontali in cima e in fondo alla tabella
lhs = visualizza i bordi esterni solo al margine sinistro della tabella
rhs = visualizza i bordi esterni solo al margine destro della tabella
vsides = visualizza i bordi esterni ai due margini destro e sinistro della tabella
box = visualizza un riquadro attorno alla tabella (tutti i margini)
border = visualizza un riquadro attorno alla tabella (come box)
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.
Provate a variare le dimensioni della vostra finestra, quella in cui state vedendo questa pagina, vedrete che anche l'altezza della tabella varia mantenendo il 10% di visualizzazione specificato.
RULES
Serve per la visualizzazione dei bordi interni quando si fa uso dei tags <THEAD> <TBODY> e <TFOOT>, tutti questi attributi sono supportati dai soli browser IE per funzionare deve essere necessariamente impostato anche l'attributo border. I valori possibili sono:
none = rimuove tutti i bordi esterni
basic = visualizza bordi orizzontali fra le sessioni <THEAD><TBODY><TFOOT>
rows = visualizza bordi orizzontali tra ciascuna riga
cols = visualizza bordi orizzontali tra cisacuna colonna
all = visualizza tutti i bordi interni
WIDTH
Permette di specificare la larghezza della tabella, che può essere in pixel o in percentuale dell'altezza della finestra del browser che la visualizza. Provate a variare le dimensioni della vostra finestra, quella in cui state vedendo questa pagina, vedrete che anche l'altezza della tabella varia mantenendo il 50% di visualizzazione specificato.
<CAPTION>...</CAPTION>
L'elemento <CAPTION> rappresenta la didascalia della tabella, deve trovarsi all'interno della tabella ma non all'interno di righe o di celle.
ALIGN
L'attributo ALIGN controlla se la didascalia deve essere sovrapposta o restare sullo sfondo a seconda che si assegni il valore TOP o BOTTOM. Per default questo valore è TOP. IE consente anche un allineamento verticale col l'attributo VALIGN. Gli altri valori possibili oltre a TOP e BOTTOM sono LEFT, CENTER, RIGHT.
VALIGN
Permette di specificare l'allineamento verticale del testo visualizzato nelle celle di una tabella, per default questo valore è centrato, questo tipo di attributo è supportato soltanto da IE.
<COL>...</COL>
Serve per specificare l'allineamento del testo per le colonne della tabella, questo TAG è supportato soltanto da IE.
<COLGROUP>...</COLGROUP>
Serve per raggruppare alcune colonne in modo da impostarne le relative proprietà di allineamento, questo TAG è supportato soltanto da IE ed accetta i seguenti attributi:
ALIGN = center, justify, left, right. per default è impostato center
SPAN = valore. Imposta il numero di colonne su cui agire con ALIGN e VALIGN
VALIGN = baseline, bottom, middle, top. Imposta l'allineamento verticale del testo
<TBODY>...</TBODY>
Questo elemento supportato soltanto da IE serve per specificare la sezione del corpo della tabella, è analogo all'elemento <BODY> di html ed influenza direttamente la visualizzazione della tabella stessa.
<TD>...</TD>
Questa coppia di tags definiscono 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 ma è possibile avere anche colori o immagini di sfondo, volendo anche diverse fra le singole celle. Attenzione però, a differenza di table è possibile adoperare anche l'attributo NOWRAP, che se presente impedisce il ritorno a capo del contenuto della cella, forzando questa a mantenere le dimensioni necessarie per contenere tutto il testo su una sola riga. Questo tag è di norma preceduto dal tag TR che definisce l'inizio della riga. All'interno di una stessa tabella e delle stesse singole righe si dovranno definire lo stesso identico numero di celle, a meno che non si faccia uso dell'attributo COLSPAN. E così via... Il tutto ovviamente all'interno dei tags <TABLE> e </TABLE> Ho reso visibile il bordo per permettere di capirne meglio il funzionamento, molto spesso invece il bordo è impostato a zero in modo da usare la tabella solo come struttura portante dei dati. Le tabelle si possono nidificare, cioè è possibile mettere delle tabelle all'interno di altre tabelle creando così strutture più o meno complesse che si adattano prfettamente a qualsiasi tipo di impaginazione voluta. 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 a questo modo per non creare lunghe attese di caricamento.
<TFOOT>...</TFOOT>
Questo elemento supportato soltanto da IE, serve per specificare la sezione del piede della tabella.
<TH>...</TH>
Questo tag definisce la cella intestazione della tabella, significa che il testo all'interno di questo tag sarà in neretto,supporta tutti gli attributi di TABLE e di TD. Attenzione all'attributo NOWRAP, se presente impedisce il ritorno a capo del contenuto della cella forzando questa a mantenere le dimensioni necessarie per contenere tutto il testo su una sola riga. Necessita di essere racchiuso fra i tags <TR> </TR> esattamente cone TD
<THEAD>...</THEAD>
Questo elemento ad uso dei soli browser IE è utilizzato per specificare la sezione di intestazione della tabella. E' simile all'elemento HEAD di html.
<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 all'interno di TR stesso.
ROWSPAN e COLSPAN
Come già accennato, le tabelle, salvo casi particolari, hanno un numero di celle uguale per ogni riga ed un numero di righe pari ad ogni serie di celle. Se non si potesse intervenire diversamente, questo le renderebbe piuttosto rigide e forse poco utilizzabili dal lato pratico. Gli attributi COLSPAN e ROWSPAN servono proprio a spezzare questa regola e dare la possibilità di modificarle a proprio piacimento, si tratta di avere le idee chiare su come dovrà essere fatta questa tabella, prima di passare alla sua realizzazione.