PROGRAMMIAMO
HTML - Colspan e rowspan
Colspan

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

 

Rowspan

Mediante l'attributo rowspan è invece possibile fondere insieme due o più celle situate sulla stessa colonna. Si consideri a tale proposito l'esempio seguente:

<table style="width: 60%" border="1">
<tr>
<td rowspan="2">prima e quarta cella </td>
<td>seconda cella </td>
<td rowspan="3">terza, sesta e nona cella </td>
</tr>
<tr>
<td>quinta cella </td>
</tr>
<tr>
<td>settima cella </td>
<td>ottava cella </td>
</tr>
</table>

che produce la seguente visualizzazione nel browser

prima e quarta cella seconda cella terza, sesta e nona cella
quinta cella
settima cella ottava cella

 

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it