Guida [tabelle] Colspan e Rowspan

[dae67]

ciao a tutti

tempo fa ho postato una guida su come creare delle tabelle in HTML e CSS.. ora insegnerò una tecnica per rendere le tabelle un poco più complesse... in base all'utilizzo che ne viene fatto:

il colspan

il colspan permette di creare una colonna che occupi 2 o più righe, vediamo come funziona:

se io ho una tabella così:
___________________
|_____|______|_____|
|_____|______|_____|
|_____|______|_____|

Perfavore, Entra oppure Registrati per vedere i codici!

questa tabella è di tre righe e tre colonne.. a me serve così:
(puntini: spazio vuoto)
____________________
|........|______|______|
|_____|______|______|
|_____|______|______|

utilizzerò il colspan...

aggiungendo alla colonna interessata il colspan e rimuovendo la riga sottostante alla colonna, la mia tabella si allungherà di 2 righe... come vedete dallo schema...

Perfavore, Entra oppure Registrati per vedere i codici!

da notare che è stata rimossa la riga <td class="ww">1</td> da <tr title="2">

il codice finale risulterebbe quindi:

Perfavore, Entra oppure Registrati per vedere i codici!

________________________________
Rowspan

il rowspan è come il colspan, ma invece di estendersi verso il basso, si estende da sinistra verso destra, esempio:

la nostra cara tabella 3x3

___________________
|_____|______|_____|
|_____|______|_____|
|_____|______|_____|

a me serve così:
___________________
|___________|______|
|_____|______|_____|
|_____|______|_____|

come fare?

osserviamo il codice del rowspan:

Perfavore, Entra oppure Registrati per vedere i codici!

è stata rimossa la riga della seconda colonna (la colonna centrale) ed è stato inserito il rowspan="valore" alla riga della prima colonna[/code]

____________________________

adesso potremmo creare tabelle più complicate... come queste:
__________________
|_____|_____|........|
|..................|........|
|___________|_____|
|_____|___________|


by ExtremeStyle Forum

 

[arthur]

Ottima Dae, anche se il Colspan già lo conoscevo! Utile! ^^

 

[dae67]

grazie... c'è anche l rowspan.. e se guardi nella sezione c'è una guida generale alle tabelle

 

[arthur]

Si! Grazie mille! Vedo subito ;)

 

[dae67]

di nnt^^ sono contento che ti piaccia ^^

 

[MixMix]

Grazie mille molto bella questa guida , bravo