TabelleUna tabella inizierà sempre con questo elemento delimitatore della tabella stessa, all'interno di questo elemento sono molti gli attributi che si possono inserire, vediamoli:attributi assegnabili all'elemento TABLE:ALIGNBACKGROUNDBGCOLOR BORDERBORDERCOLORBORDERCOLORDARKBORDERCOLORLIGHT CELLPADDING CELLSPACIG FRAME HEIGHT RULES WIDTHSi 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. ALIGNConsente di specificarne l'allineamento con le seguenti possibilità: Center, Left e Right rispettivamente per centrato, a sinistra, a destra. BACKGROUNDPermette 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"> BGCOLORPermette 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="Yellow"> <TABLE BGCOLOR="#ffff00"> BORDERPermette 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.<TABLE border ="1"><TABLE border ="5"><TABLE border ="10"> BORDERCOLORPermette 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"> BORDERCOLORDARKPermette 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"> BORDERCOLORLIGHTPermette 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"> CELLPADDINGSpecifica 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.<TABLE cellpadding="0"><TABLE cellpadding="10"> CELLSPACINGSpecifica 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 .<TABLE cellspacing="0"><TABLE cellspacing="10"> FRAMEPermette 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 esterniabove = visualizza solo i bordi esterni in cima alla tabellabelow = visualizza solo i bordi esterni in fondo alla tabellahsides = visualizza solo i bordi orizzontali in cima e in fondo alla tabellalhs = visualizza i bordi esterni solo al margine sinistro della tabellarhs = visualizza i bordi esterni solo al margine destro della tabellavsides = visualizza i bordi esterni ai due margini destro e sinistro della tabellabox = visualizza un riquadro attorno alla tabella (tutti i margini)border = visualizza un riquadro attorno alla tabella (come box) HEIGHTPermette di specificare l'altezza della tabella, che può essere in pixel o in percentuale dell'altezza della finestra del browser che la visualizza.<TABLE height="50"><TABLE height="10%">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. RULESServe 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 esternibasic = visualizza bordi orizzontali fra le sessioni rows = visualizza bordi orizzontali tra ciascuna rigacols = visualizza bordi orizzontali tra cisacuna colonnaall = visualizza tutti i bordi interni WIDTHPermette di specificare la larghezza della tabella, che può essere in pixel o in percentuale della larghezza della finestra del browser che la visualizza.<TABLE width="350"><TABLE width="50%">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. cellaDidascalia della tabellagli attributi associabili a questo tag sono: ALIGNVALIGN ALIGNL'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 = TOPQuesta è una didascalia con align = BOTTOM<CAPTION align="bottom">Questa è una didascalia con align = BOTTOM VALIGNPermette 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 centerSPAN = valore. Imposta il numero di colonne su cui agire con ALIGN e VALIGNVALIGN = 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 e 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 risultatoquesta la cella THquesta 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 COLSPANCome 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 risultatoriga 1 cella 1riga 1 cella 2riga 2 cella 3riga 2 cella 4E' 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 1riga 1 cella 2riga 1 cella 3riga 1 cella 4riga 2 cella 5riga 2 cella 6riga 1 cella 7riga 1 cella 8Adesso 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 1riga 1 cella 2riga 1 cella 3riga 1 cella 4riga 2 cella 5riga 2 cella 6riga 2 cella 7Vediamo 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 2riga 2 cella 3riga 2 cella 4Dicevo 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 1tab 2 rig 1 cel 2tab 2 rig 2 cel 3tab 2 rig 2 cel 4tab1 riga 1 cella 2tab1 riga 1 cella 3tab 1 riga 2 cella 4tab1 riga 2 cella 5
Lezione (html) Tabelle
TabelleUna tabella inizierà sempre con questo elemento delimitatore della tabella stessa, all'interno di questo elemento sono molti gli attributi che si possono inserire, vediamoli:attributi assegnabili all'elemento TABLE:ALIGNBACKGROUNDBGCOLOR BORDERBORDERCOLORBORDERCOLORDARKBORDERCOLORLIGHT CELLPADDING CELLSPACIG FRAME HEIGHT RULES WIDTHSi 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. ALIGNConsente di specificarne l'allineamento con le seguenti possibilità: Center, Left e Right rispettivamente per centrato, a sinistra, a destra. BACKGROUNDPermette 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"> BGCOLORPermette 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="Yellow"> <TABLE BGCOLOR="#ffff00"> BORDERPermette 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.<TABLE border ="1"><TABLE border ="5"><TABLE border ="10"> BORDERCOLORPermette 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"> BORDERCOLORDARKPermette 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"> BORDERCOLORLIGHTPermette 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"> CELLPADDINGSpecifica 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.<TABLE cellpadding="0"><TABLE cellpadding="10"> CELLSPACINGSpecifica 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 .<TABLE cellspacing="0"><TABLE cellspacing="10"> FRAMEPermette 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 esterniabove = visualizza solo i bordi esterni in cima alla tabellabelow = visualizza solo i bordi esterni in fondo alla tabellahsides = visualizza solo i bordi orizzontali in cima e in fondo alla tabellalhs = visualizza i bordi esterni solo al margine sinistro della tabellarhs = visualizza i bordi esterni solo al margine destro della tabellavsides = visualizza i bordi esterni ai due margini destro e sinistro della tabellabox = visualizza un riquadro attorno alla tabella (tutti i margini)border = visualizza un riquadro attorno alla tabella (come box) HEIGHTPermette di specificare l'altezza della tabella, che può essere in pixel o in percentuale dell'altezza della finestra del browser che la visualizza.<TABLE height="50"><TABLE height="10%">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. RULESServe 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 esternibasic = visualizza bordi orizzontali fra le sessioni rows = visualizza bordi orizzontali tra ciascuna rigacols = visualizza bordi orizzontali tra cisacuna colonnaall = visualizza tutti i bordi interni WIDTHPermette di specificare la larghezza della tabella, che può essere in pixel o in percentuale della larghezza della finestra del browser che la visualizza.<TABLE width="350"><TABLE width="50%">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. cellaDidascalia della tabellagli attributi associabili a questo tag sono: ALIGNVALIGN ALIGNL'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 = TOPQuesta è una didascalia con align = BOTTOM<CAPTION align="bottom">Questa è una didascalia con align = BOTTOM VALIGNPermette 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 centerSPAN = valore. Imposta il numero di colonne su cui agire con ALIGN e VALIGNVALIGN = 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 e 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 risultatoquesta la cella THquesta 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 COLSPANCome 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 risultatoriga 1 cella 1riga 1 cella 2riga 2 cella 3riga 2 cella 4E' 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 1riga 1 cella 2riga 1 cella 3riga 1 cella 4riga 2 cella 5riga 2 cella 6riga 1 cella 7riga 1 cella 8Adesso 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 1riga 1 cella 2riga 1 cella 3riga 1 cella 4riga 2 cella 5riga 2 cella 6riga 2 cella 7Vediamo 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 2riga 2 cella 3riga 2 cella 4Dicevo 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 1tab 2 rig 1 cel 2tab 2 rig 2 cel 3tab 2 rig 2 cel 4tab1 riga 1 cella 2tab1 riga 1 cella 3tab 1 riga 2 cella 4tab1 riga 2 cella 5