Vai al contenuto

Come si Raggruppano celle con rowspan e colspan?

Per fare in modo che una cella occupi più di una colonna si utilizza l’attributo colspan che si applica a td e a th nel mio esempio:

la sintassi è la seguente:

<table>
<thead>
<tr><th colspan=”2″>intestazione su due colonne</th><th>head</th></tr>
</thead>
<tbody>
<tr><td>campo riga 1 colonna 1</td><td>campo riga 1 colonna 2</td></tr>
<tr><td>campo riga 2 colonna 1</td><td>campo riga 2 colonna 2</td></tr>

</tbody>
</table>

N.B. Il testo “intestazione su due colonne” l’ho utilizzato per spiegare la funzionalità, mentre nell’immagine ho utilizzato come testo “colspan”. Per far apparire il testo colspan, bastava semplicemente scriverlo al posto di “intestazione su due colonne” e avremmo ottenuto: <tr><th colspan=”2″>colspan</th><th>head</th></tr> . In questo modo la sintassi e l’immagine sono allineati.

Diversamente, per far si che la sia espansa su due righe come da figura di seguito,

si utilizza invece la seguente sintassi:

<table>
<tbody>
<tr><td rowspan=”2″>rowspan</td><td></td></tr>
<tr><td></td></tr>
</tbody>
</table>

Questo è in sintesi l’utilizzo dei due attributi colspan e rowspan.