Attribut colspan

L'attribut colspan contrôle la fusion des colonnes d'un tableau HTML. Il s'applique aux balises th et td.

Valeur acceptée : un nombre entier à partir de 1.

Comment l'utiliser : on ajoute cet attribut à n'importe quelle cellule td ou th. Si, par exemple, on définit colspan à la valeur 2 - alors la cellule à laquelle on l'a attribué occupera deux colonnes du tableau. Dans ce cas, les cellules voisines à droite ne disparaîtront pas, notre cellule élargie les déplacera et le tableau se déstructurera. Pour éviter cela, il faut supprimer une des cellules à droite. Voir les exemples pour une meilleure compréhension.

Exemple . Tableau sans fusions

Regardons un tableau sans fusions, sur lequel nous allons travailler ensuite :

<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;
}

Exemple . Élargissons une cellule sur deux colonnes

Essayons d'élargir la cellule 1 sur deux colonnes, en lui attribuant l'attribut colspan avec la valeur 2. Ce faisant, elle déplacera les cellules à droite et le tableau se déstructurera :

<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;
}

Exemple . Élargissons une cellule sans déstructuration du tableau

Essayons maintenant de corriger le problème de déstructuration du tableau de l'exemple précédent, en supprimant une des cellules à droite de la nôtre (c'est la cellule 2 ou 3 - peu importe) :

<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;
}

Exemple . Élargissons une cellule sur trois colonnes

Élargissons la cellule 1 sur 3 colonnes et attribuons-lui l'attribut colspan avec la valeur 3. Ce faisant, supprimons encore une cellule à droite, pour que le tableau ne se déstructure pas :

<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;
}

Exemple . Colspan et rowspan simultanément

Essayons de fusionner les cellules numéros 4, 5, 7 et 8, en utilisant les attributs colspan et rowspan (retirons les fusions précédentes du tableau) :

<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;
}

Voir aussi

l'attribut rowspan,
qui fusionne les rangées du tableau