CSS: gestire le celle di tabella con colspan

  • CSS
  • Gabriele Romanato

L'attributo colspan applicato alle celle di tabella fa si che i browser ricalcolino lo spazio occupato dalle singole celle tenendo presenti due fattori. Il primo è la larghezza di una colonna, calcolata selezionando la larghezza maggiore tra le colonne. Il secondo è la larghezza complessiva della tabella, cacolata sommando le larghezze delle singole colonne. I CSS possono controllare la larghezza assegnata a questo tipo di celle in modo molto semplice: utilizzando i selettori di attributo. Vediamo come.

Partiamo dalla seguente struttura HTML:


<table summary="Tabella di esempio">
	<caption>Tabella</caption>
	<thead>
		<tr>
			<th scope="col">Intestazione 1</th>
			<th scope="col">Intestazione 2</th>
			<th scope="col">Intestazione 3</th>
			<th scope="col">Intestazione 4</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Cella</td>
			<td>Cella</td>
			<td>Cella</td>
			<td>Cella</td>
		</tr>
		<tr>
			<td colspan="2">Cella</td>
			<td colspan="2">Cella</td>
		</tr>
		<tr>
			<td>Cella</td>
			<td>Cella</td>
			<td>Cella</td>
			<td>Cella</td>
		</tr>
		<tr>
			<td colspan="2">Cella</td>
			<td colspan="2">Cella</td>
		</tr>
    </tbody>
</table>

che ha questa visualizzazione predefinita:

Celle di tabella con colspan

Come si può notare, i browser hanno calcolato già la larghezza delle colonne tenendo presente la quantità di contenuto al loro interno (algoritmo shrink-to-fit). Ma cosa avviene quando assegniamo degli stili alla tabella e ne determiniamo le dimensioni? Vediamo:


table {
	margin: 2em auto;
	width: 440px;
	border-collapse: collapse;
	table-layout: fixed;
	border: 2px solid #bbb;
	font: 100% Georgia, serif;
}

caption {
	text-align: left;
	font: 1.4em Arial, sans-serif;
	color: #444;
	padding-bottom: 4px;
	text-transform: uppercase;
}

thead {
	background: #eee;
}

th {
	padding: 5px;
	border-bottom: 1px solid #bbb;
	vertical-align: middle;
	width: 110px;
}

tbody {
	background: #ddd;
}

td {
	width: 110px;
	border-bottom: 1px solid #bbb;
	padding: 5px;
	vertical-align: middle;
	border-right: 1px solid #bbb;
}

td[colspan="2"] {
	width: 220px;
	text-align: center;
}

Una colonna è larga 110 pixel, perchè questa è la larghezza massima di una singola cella. Quindi usiamo i selettori di attributo per specificare che una cella con attributo colspan pari a 2 deve essere larga 220 pixel, ossia 110 per 2:


td[colspan="2"] {
	width: 220px;
	text-align: center;
}

Potete visionare l'esempio finale in questa pagina.

Torna su