Chiamaci Web Design Roma - Via spinoza 86,
Chiamaci
00137 Roma - Tel. 06 86891320
Web Design Roma Home
ELABORARE.COM
CATERING MATRIMONIO
ADRCENTER.IT
MONDOADR.IT
ASIR.IT
WSRMAG.IT
SPECIALMAG.IT
ARBAKA.COM
CATENELLA58.IT
EVENTISPETTACOLARI.IT
STARSITALIA.IT
VINICASTELLIROMANI.IT
FOTOGALLERY
AUTOMOTOCLUBROMA.ORG
EMCA4.C0M
GIANFRANCODEMEO.IT
LUCIOVECCHIOTTI.COM
EIDOSTUDIO.COM
ALLIANCECULTURELLE.COM
IBUSINESSPROMOTER.IT
PINOLEONE.COM
NEGOTIATE.IT
COMPUTER-ROMA.IT
PERCORSIFORMATIVI.IT

Raggruppare celle con rowspan e colspan

Scritto da Federico Albani   

Finora abbiamo immaginato le tabelle come griglie rigide, in cui il numero delle colonne era dato come costante e non modificabile. I raggruppamenti di righe e colonne che abbiamo esaminato finora non hanno modificato minimamente questa struttura.

In realtà è possibile raggruppare le delle all'interno delle colonne in modo da avere ad esempio una riga da 2 colonne e un’altra da 3. Per ottenere questo risultato è necessario specificare che una cella deve occupare il posto di 2 (o più colonne). In questo caso si utilizza l’attributo colspan sul <td>, specificando come valore il numero di celle che devono essere occupate. Ad esempio:

   
 <td colspan="2">

Il cui codice corrispondente è:

<table width="430" border="1" bordercolor="#000000">
 <tr>
  <td width="30%"> </td>
  <td width="30%"> </td>
  <td width="30%"> </td>
 </tr>
 <tr>
  <td> </td>
  <td colspan="2" align="center" valign="middle">
   <b><td colspan="2"></b>
  </td>
 </tr>
</table>

Tramite l’attributo rowspan (da riferirsi sempre a <td>) è invece possibile creare delle celle che occupino più di una riga. Ad esempio:

 <tdrowspan="2">  
  

il cui codice corrispondente è:

<table width="430" border="1" bordercolor="#000000">
 <tr>
  <td width="30%"> </td>
  <td width="30%" rowspan="2" align="center" valign="middle">
   <b><tdrowspan="2"></b>
  </td>
  <td width="30%"> </td>
 </tr>
 <tr>
  <td> </td>
  <td> </td>
 </tr>
</table>

Per un esempio approfondito esaminare il codice di questa pagina.

Hits: 227
Commenti (0)Add Comment

Scrivi commento
quote
bold
italicize
underline
strike
url
image
quote
quote
smile
wink
laugh
grin
angry
sad
shocked
cool
tongue
kiss
cry
smaller | bigger

busy
 
< Prec.   Pros. >