attributi assegnabili all'elemento TABLE: | ALIGN
BACKGROUND
BGCOLOR
BORDER
BORDERCOLOR
BORDERCOLORDARK
BORDERCOLORLIGHT
CELLPADDING
CELLSPACIG
FRAME
HEIGHT
RULES
WIDTH
|
|
Si inseriscono lasciando uno spazio vuoto fra la scritta table e la sua chiusura > gli attributi possono essere più di uno e specificati uno di seguito all'altro. 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 anche agli elementi che costituiscono la struttura della tabella stessa quali: | e | descritti più avanti. Si possono utilizzare i vari tipi di file grafici consentiti: gif, jpg, png.<TABLE background="immagine_di_sfondo.jpg"> |
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. <TABLE BGCOLOR="#ffff00"> |
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. <TABLE border="1" bordercolor="Red"> |
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. <TABLE border="1" bordercolordark="Red"> |
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. <TABLE border="1" bordercolorlight="Red"> |
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 | e , 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
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 della larghezza 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.
| ...
L'elemento rappresenta la didascalia della tabella, deve trovarsi all'interno della tabella ma non all'interno di righe o di celle. | gli attributi associabili a questo tag sono: | ALIGN
VALIGN
|
|
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. Questa è una didascalia con align = TOP<CAPTION align="top"> | Questa è una didascalia con align = TOP | | |
| |
Questa è una didascalia con align = BOTTOM<CAPTION align="bottom"> | Questa è una didascalia con align = BOTTOM | | |
| |
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.
...
Serve per specificare l'allineamento del testo per le colonne della tabella, questo TAG è supportato soltanto da IE.
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
Questo elemento supportato soltanto da IE serve per specificare la sezione del corpo della tabella, è analogo all'elemento di html ed influenza direttamente la visualizzazione della tabella stessa.
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.
| ... | ......
| <TD>questa è una cella </TD>
| <TD>queste sono due celle </TD><TD>queste sono due celle </TD> |
| <TD>queste sono tre celle </TD><TD>queste sono tre celle </TD> | <TD>queste sono tre celle </TD> |
E così via... Il tutto ovviamente all'interno dei tags 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.
| ...
Questo elemento supportato soltanto da IE, serve per specificare la sezione del piede della tabella.
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
| ... |
|---|
|
esattamente cone TD
<TH> questa la cella TH | | <TD> questa la cella TD |
|
|
Questo il risultato questa la cella TH |
|---|
questa la cella TD |
| ...
Questo elemento ad uso dei soli browser IE è utilizzato per specificare la sezione di intestazione della tabella. E' simile all'elemento HEAD di html.
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.
...
| <TD>questa è una riga con una cella </TD>
| | queste sono due righe | | | con una cella per riga |
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. Vediamo alcuni esempi che chiariranno certamente meglio il concetto.
| riga 1 cella 1 | riga 1 cella 2 |
| riga 2 cella 3 | riga 2 cella 4 |
|
Questo sotto il risultato | riga 1 cella 1 | riga 1 cella 2 | | riga 2 cella 3 | riga 2 cella 4 |
E' abbastanza intuitivo che se servisse una tabella con 16 celle si potrebbe disporla su 4 righe con 4 celle, oppure 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 dove magari la prima di dimensioni maggiori, 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 un esempio. La tabella regolare prevede due TR ed otto TD, praticamente quattro per ogni TR
questo il risultato: | riga 1 cella 1 | riga 1 cella 2 | riga 1 cella 3 | riga 1 cella 4 | | riga 2 cella 5 | riga 2 cella 6 | riga 1 cella 7 | riga 1 cella 8 |
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:
| riga 1/2 cella 1 | riga 1 cella 2 | riga 1 cella 3 | riga 1 cella 4 |
| riga 2 cella 5 | riga 2 cella 6 | riga 2 cella 7 |
|
| riga 1/2 cella 1 | riga 1 cella 2 | riga 1 cella 3 | riga 1 cella 4 | | riga 2 cella 5 | riga 2 cella 6 | riga 2 cella 7 |
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, e mettiamo l'attributo COLSPAN seguito dal numero 3; la tabella espanderà 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:
| riga 1 cella 1, 2, 3 |
| riga 2 cella 2 | riga 2 cella 3 | riga 2 cella 4 |
|
| riga 1 cella 1, 2, 3 | | riga 2 cella 2 | riga 2 cella 3 | riga 2 cella 4 |
Dicevo all'inizio di questa lezione che le tabelle possono essere nidificate fra di loro, non ci sono limiti se non quello della propria fantasia. Magari evitate di complicarvi troppo la vita se non ce ne fosse realmente il bisogno. Ecco un altro esempio pratico:
| riga 1 cella 1, 2, 3 |
| riga 2 cella 2 | riga 2 cella 3 | riga 2 cella 4 |
|
| tab 2 rig 1 cel 1 | tab 2 rig 1 cel 2 | | tab 2 rig 2 cel 3 | tab 2 rig 2 cel 4 |
| tab1 riga 1 cella 2 | tab1 riga 1 cella 3 | | tab 1 riga 2 cella 4 | tab1 riga 2 cella 5 |
|
|
|
|
|
|
|---|
|
Condividi e segnala 
Sesso: M
