HTML Tutorial

Html: unione di celle


L’attributo COLSPAN


Finora abbiamo creato tabelle come griglie rigide, in cui il numero delle colonne era dato come costante e non modificabile.

In realtà è possibile raggruppare le celle all’interno delle colonne in modo da avere ad esempio una riga da 3 colonne e un’altra da 4. 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 all’interno del tag <td>, specificando come valore il numero di celle che devono essere occupate.

La sintassi è la seguente:

<td colspan='2'>… contenuto cella …</td>

In questo caso la cella occuperà il posto di due celle e il suo contenuto sarà visibile all’interno dello spazio creato.

Vediamo un esempio pratico. Il codice html:

<table border='1' width='400px'>
<tr>
    <td align='center'>Cella 1</td>
    <td align='center'>Cella 2</td>
    <td align='center'>Cella 3</td>
    <td align='center'>Cella 4</td>
</tr>
<tr>
    <td align='center'>Cella 5</td>
    <td align='center'>Cella 6</td>
    <td colspan='2' align='center'>Cella 7</td>
</tr>
<tr>
    <td align='center'>Cella 8</td>
    <td colspan='3' align='center'>Cella 9</td>
</tr>
</table>

Produce la seguente tabella:

Cella 1 Cella 2 Cella 3 Cella 4
Cella 5 Cella 6 Cella 7
Cella 8 Cella 9


L’attributo ROWSPAN


Anche l’attributo ROWSPAN è utile ad unire le celle di una tabella html. A differenza di colspan però questo attributo lavora sull’unione di righe.

In altre parole è possibile far si che una cella si estenda su più righe:

<td rowspan='2'>… contenuto cella …</td>

In questo caso infatti il contenuto della cella verrà visualizzato in una cella estesa su due righe (rowspan=’2′). E’ possibile inoltre combinare insieme rowspan e colspan se vogliamo ad esempio che una cella si estenda sia in orizzontale che in verticale.

Riprendendo il codice html proposto nella sezione precedente, modifichiamolo in modo tale che la prima cella si estenda su tutte e tre le righe lasciando intatte le colonne con attributo colspan. Il codice sarà il seguente:

<table border='1' width='400px'>
<tr>
    <td align='center' rowspan='3'>Cella 1</td>
    <td align='center'>Cella 2</td>
    <td align='center'>Cella 3</td>
    <td align='center'>Cella 4</td>
</tr>
<tr>
    <td align='center'>Cella 6</td>
    <td colspan='2' align='center'>Cella 7</td>
</tr>
<tr>
    <td colspan='3' align='center'>Cella 9</td>
</tr>
</table>

E produce la tabella:

Cella 1 Cella 2 Cella 3 Cella 4
Cella 6 Cella 7
Cella 9