In condizioni normali in una tabella il numero di celle su ogni riga è sempre lo stesso. Sarebbe perciò sbagliato definire per esempio una riga con 4 celle e un'altra con 3 sole celle nella stessa tabella. Questo perchè le celle sono incolonnate automaticamente una sotto l'altra su tutte le righe e condividono gli stessi margini.
Si consideri però la seguente tabella
<table style="width: 60%" border="1">
<tr>
<td colspan ="2">prima e seconda cella </td>
<td>terza cella </td>
</tr>
<tr>
<td>quarta cella </td>
<td>quinta cella </td>
<td>sesta cella </td>
</tr>
<tr>
<td>settima cella </td>
<td>ottava cella </td>
<td>nona cella </td>
</tr>
</table>
che viene visualizzata nel seguente modo:
prima e seconda cella | terza cella | |
quarta cella | quinta cella | sesta cella |
settima cella | ottava cella | nona cella |
L'attributo colspan, applicato alla prima cella, indica che la prima cella deve "allargarsi" su due colonne. In pratica il risultato è come se venissero fuse insieme due celle adiacenti della prima riga. In altre parole: la prima cella della prima riga occupa lo spazio di due celle e conta per due.
Si consideri ancora l'esempio seguente, in cui l'attributo colspan è usato sulla stessa tabella di prima allo scopo di fondere insieme le ultime tre celle:
<table style="width: 60%" border="1">
<tr>
<td colspan ="2">prima e seconda cella </td>
<td>terza cella </td>
</tr>
<tr>
<td>quarta cella </td>
<td>quinta cella </td>
<td>sesta cella </td>
</tr>
<tr>
<td colspan = "3" >settima, ottava e nona cella </td>
</tr>
</table>
il cui effetto nel browser è il seguente:
prima e seconda cella | terza cella | |
quarta cella | quinta cella | sesta cella |
settima, ottava e nona cella |
Mediante l'attributo rowspan è invece possibile fondere insieme due o più celle situate sulla stessa colonna. Si consideri a tale proposito l'esempio seguente:
che produce la seguente visualizzazione nel browser
prima e quarta cella | seconda cella | terza, sesta e nona cella |
quinta cella | ||
settima cella | ottava cella |
Sito realizzato in base al template offerto da
http://www.graphixmania.it