Attributo colspan

L'attributo colspan controlla l'unione delle colonne nelle tabelle HTML. Si applica ai tag th e td.

Valore accettato: numero intero a partire da 1.

Come usarlo: aggiungiamo questo attributo a qualsiasi cella td o th. Se, ad esempio, impostiamo colspan al valore 2 - la cella a cui è stato impostato occuperà due colonne della tabella. In questo caso le celle adiacenti a destra non scompariranno, la nostra cella allargata le sposterà e la tabella si romperà. Per evitare che ciò accada, è necessario rimuovere una delle celle a destra. Guardate gli esempi per una migliore comprensione.

Esempio . Tabella senza unioni

Diamo un'occhiata a una tabella senza unioni, con cui lavoreremo in seguito:

<table>
	<tr>
		<td>cell1</td>
		<td>cell2</td>
		<td>cell3</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell5</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell8</td>
		<td>cell9</td>
	</tr>
</table>

table, td, th {
	border: 1px solid black;
}

Esempio . Espandiamo la cella su due colonne

Proviamo ad espandere la cella 1 su due colonne, impostando l'attributo colspan al valore 2. In questo caso sposterà le celle a destra e la tabella si romperà:

<table>
	<tr>
		<td colspan="2">cell1</td>
		<td>cell2</td>
		<td>cell3</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell5</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell8</td>
		<td>cell9</td>
	</tr>
</table>

table, td, th {
	border: 1px solid black;
}

Esempio . Espandiamo la cella senza rompere la tabella

Ora proviamo a correggere il problema della rottura della tabella dell'esempio precedente, rimuovendo una delle celle a destra della nostra (è la cella 2 o 3 - non importa):

<table>
	<tr>
		<td colspan="2">cell1</td>
		<td>cell2</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell5</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell8</td>
		<td>cell9</td>
	</tr>
</table>

table, td, th {
	border: 1px solid black;
}

Esempio . Espandiamo la cella su tre colonne

Espandiamo la cella 1 su 3 colonne e impostiamo il suo attributo colspan al valore 3. In questo caso rimuoviamo un'ulteriore cella a destra, in modo che la tabella non si rompa:

<table>
	<tr>
		<td colspan="3">cell1</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell5</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell8</td>
		<td>cell9</td>
	</tr>
</table>

table, td, th {
	border: 1px solid black;
}

Esempio . Colspan e rowspan simultaneamente

Proviamo a unire le celle con i numeri 4, 5, 7 e 8, utilizzando gli attributi colspan e rowspan (rimuoviamo le unioni precedenti dalla tabella):

<table>
	<tr>
		<td colspan="3">cell1</td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">cell4</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell9</td>
	</tr>
</table>

table, td, th {
	border: 1px solid black;
}

Vedi anche

l'attributo rowspan,
che unisce le righe della tabella