Raggruppare celle con rowspan e colspan

25 agosto 2016

Grazie al tag <table>, abbiamo visto come HTML ci consenta di rappresentare tabelle e di dare significato ai dati sfruttando raggruppamenti di righe e colonne. Vediamo ora come poter fondere due o più celle in una. In sostanza possiamo fare in modo una casella occupi più di una colonna o più di una riga.

colspan

Prendiamo ad esempio una tabella 3×3 un cui vogliamo che una riga abbia una intestazione che valga per 2 colonne:

<table>
	<thead>
		<tr><th colspan="2">double head</th><th>head</th></tr>
	</thead>
	<tbody>
		<tr><td>cell</td><td>cell</td><td>cell</td></tr>
		<tr><td>cell</td><td>cell</td><td>cell</td></tr>
		<tr><td>cell</td><td>cell</td><td>cell</td></tr>		
	</tbody>
</table>
colspan

Per ottenere una cella che occupi più colonne utilizziamo l’attributo colspan che si applica a td e a th come nel nostro caso. In questo modo ad esempio abbiamo indicato un header che vale per entrambe le colonne sottostanti.

Importante notare che, poiché la nostra casella occupa due posti, per completare le tre colonne basterà aggiungere solo un altro th.

Per completezza facciamo anche un esempio con td e colspan, creando un’ipotetica scheda per la palestra:

<table>
	<thead>
		<tr><th>Lunedì</th><th>Mercoledì</th><th>Venerdì</th></tr>
	</thead>
	<tbody>
		<tr><td colspan="3">Cyclette</td></tr>
		<tr><td>Esercizi spalle</td><td>Pettorali</td><td>Tricipiti</td></tr>
		<tr><td>Squat</td><td>Estensioni gambe</td><td>Polpacci</td></tr>		
	</tbody>
</table>
colspan-scheda

rowspan

Per ottenere una cella che si estenda su più di una riga utilizziamo l’attributo rowspan in modo del tutto simile a quanto fatto con colspan:

<table>
	<thead>
		<tr><th>head</th><th>head</th><th>head</th></tr>
	</thead>
	<tbody>
		<tr><td rowspan="2">double row cell</td><td>cell</td><td>cell</td></tr>
		<tr><td>cell</td><td>cell</td></tr>
		<tr><td>cell</td><td>cell</td><td>cell</td></tr>		
	</tbody>
</table>
rowspan

Semantica di colspan e rowspan

A livello semantico risulta abbastanza inutuitivo: le intestazioni (th) che sono su più colonne o più righe definiscono il significato delle relative colonne o righe, mentre i dati (td) che sussistono su più righe o colonne acquisicono il significato relativo alle righe o alle colonne che occupano.

Concludiamo con un ultimo esempio pratico in cui definiamo un ipotetico orario scolastico:

<table>
	<caption>Orario III B</caption> 
	<thead>
		<tr>
			<th>Ora</th><th>Lunedì</th><th>Martedì</th><th>Mercoledì</th><th>Giovedì</th><th>Venerdì</th>
		</tr>
	</thead>
	<tbody>
		<tr> 
			<th>I</th>
			<td rowspan="3">Italiano</td><td>Geografia</td><td nowrap>Ed. artistica</td><td colspan="2">Ed. Musicale</td>
		</tr>
		<tr> 
			<th>II</th>
			<td rowspan="2">Scienze</td><td rowspan="2">Ed. fisica</td><td colspan="2">Matematica</td>
		</tr>
		<tr> 
			<th>III</th>
			<td colspan="2">Italiano</td>
		</tr>
		<tr> 
			<th>IV</th>
			<td>Storia</td><td>Matematica</td><td>Geografia</td><td colspan="2">Ed. tecnica</td>
		</tr>
	</tbody>
</table>
rowspan

Tutte le lezioni

1 ... 13 14 15 ... 58

Se vuoi aggiornamenti su Raggruppare celle con rowspan e colspan inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Raggruppare celle con rowspan e colspan

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy