Le Tabelle una delle più geniali invenzioni che si potessero fare per html :-) Croce e delizia dei due browser che le supportano in modo molto diverso. Non servono solo per incorniciare dati come si potrebbe pensare, le tabelle se sapientemente sapute sfruttare permettono una precisa impaginazione di tutti gli elementi che compongono la pagina siano questi testi, immagini o qualsiasi altra cosa. Alcuni tags sono ad uso esclusivo dei soli browser MS non mi sono preoccupato molto di entrare nei particolari non perchè siano esclusivi di un solo browser per altro il più adoperato in assoluto ma perchè personalmente li trovo inutili, chi sono io da poter giudicare a questo modo ??? Nessuno, non sono proprio nessumo ma se pensate che possano servire potete sempre ricredervi più avanti ...

<TABLE>...</TABLE>

Una tabella inizierà sempre con questo elemento <TABLE> delimitatore della tabella, all'interno dello stesso dopo aver lasciato uno spazio sono diversi gli attributi che si possono inserire, vediamoli:

ALIGN

Consente di specificarne l'allineamento con le seguenti possibilità: Center, Left e Right rispettivamente per centrato sinistra e destra

BACKGROUND

Permette di avere un'immagine come sfondo della tabella, solo IE supporta questo attributo, è 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 può utilizzare qualsiasi tipo di file grafico consentito.

BGCOLOR

Permette di avere un colore a 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 (l'opposto di BORDERCOLORLIGHT) su un bordo 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.

BORDERCOLORLIGHT

Permette di selezionare il colore più chiaro (l'opposto di BORDERCOLORDARK) su un bordo 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 della cella di una tabella e il dato vero e proprio contenuto nella cella stessa, il valore per default è 1 , quindi per una tabella più compressa possibile si dovrà impostare cellpadding uguale a zero.

CELLSPACING

Specifica la quantità di spazio vuoto da inserire tra le singole celle di dati di una tabella, il valore per default è 2 , quindi per una tabella più compressa possibile si dovrà impostare cellspacing uguale a zero .

FRAME

Permette di scegliere quale tipo di visualizzazione assegnare al bordo, questo attributo supportato solo da IE per funzionare deve ovviamente 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 specificarne con precisione l'altezza della tabella che può essere in pixel o in percentuale dell'altezza della finestra del browser.

Provate a variare le dimensioni della finestra del browser, vedrete che anche l'altezza della tabella varia mantenendo quel 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 necessariamente avere 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 con precisione la larghezza della tabella che può essere in pixel o in percentuale della larghezza della finestra del browser.

Provate a variare le dimensioni della finestra del browser, vedrete che anche la larghezza della tabella varia mantenendo quel 50% di visualizzazione specificato.

<CAPTION>...</CAPTION>

L'elemento <CAPTION> rappresenta la didascalia della tabella deve trovarsi si all'interno della tabella ma non all'interno di righe o celle

ALIGN

L'attributo ALIGN controlla se la didascalia debba essere sovrapposta o restare sullo sfondo a seconda che si assegni il valore TOP o BOTTOM per default è 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 attributo è supportato solo da IE.

<COL>...</COL>

Serve per specificare l'allineamento del testo per le colonne della tabella questo TAG è supportato solo da IE.

<COLGROUP>...</COLGROUP>

Serve per raggruppare alcune colonne in modo da impostarne le relative proprietà di allineamento, questo TAG è supportato solo da IE ed accetta i seguenti attributi:

<TBODY>...</TBODY>

Questo elemento supportato solo da IE serve per specificare la sezione del corpo della tabella, è analogo all'elemento <BODY> di html ed influenza direttamente la visualizzazione della tabella.

<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 oltre ai vari allineamenti è possibile avere colori o immagini di sfondo diverse anche per ogni singola cella. Attenzione 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 di una una riga. All'interno delle singole righe si dovranno definire lo stesso 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 che si adattano prfettamente a qualsiasi tipo di impaginazione voluta, queste potrebbero contenere anche parti di immagini che si ricompongono cella per cella come se si trattasse di un puzzle. Anzi per immagini di grosse dimensioni vengono adoperate per non creare lunghe attese di caricamento.

<TFOOT>...</TFOOT>

Questo elemento supportato solo 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

Questo il risultato

<THEAD>...</THEAD>

Questo elemento specifico di IE è utilizzato per specificare la sezione di intestazione della tabella. E' simile all'elemento HEAD di html.

<TR>...</TR>

Questo tag definisce la 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 quindi non hanno 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 gia' detto 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, 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 solo di avere idee chiare su come dovrà essere fatta la tabella prima di passare alla sua realizzazione, vediamo alcuni esempi che chiariranno certamente meglio il concetto.

Questo sotto il risultato

E' abbastanza intuitivo che se servisse una tabella con 16 celle si potrebbe disporla su 4 righe con 4 celle o due righe con 8 celle o anche 8 righe con 2 celle, e perchè no 16 righe da una sola cella ?
Quando però la tabella non è più regolare per esempio nel caso servano 7 celle e magari la prima più grande per mettere al suo interno un'intestazione o altro, come fare ?
ROWSPAM e COLSPAN servono proprio a questo a spezzare righe e colonne mantenendo la struttura, vediamo come da questo esempio.

La tabella regolare prevede due TR e otto TD, praticamente quattro per ogni TR
questo il risultato:

Adesso al primo TD quello della cella 1 riga uno aggiungeremo l'attributo ROWSPAN seguito dal numero 2, così facendo la tabella espanderà la colonna cella 1 in modo che prenda 2 posti quindi si fonderà con la cella sottostante che andrà eliminata, questo il listato ed anche l'esempio pratico:

Vediamo adesso lo stesso esempio ma immaginando che sia la prima riga che dovrà essere di dimensioni pari a 3 celle. Torniamo al primo TD quello della cella 1 riga 1 mettiamo l'attributo COLSPAN seguito dal numero 3 la tabella espandera la riga cella 1 in modo che prenda altri 2 posti quindi si fonderà con le celle laterali che noi elimineremo, questo il listato ed anche l'esempio pratico:

Dicevo all'inizio che le tabelle possono essere nidicficate fra loro non ci sono limiti se non quello della propria fantasia, magari evitate di complicarvi troppo la vita se non ce n'e' veramente bisogno. Ecco un altro esempio pratico:

Andrea Bianchi

Puoi lasciarmi un msg, un suggerimento, una critica.

© Andrea Bianchi 1997-1998-1999-2000