Attribut rowspan

L'attribut rowspan contrôle la fusion des rangées dans 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 rowspan avec la valeur 2 - alors la cellule à laquelle cela a été attribué occupera deux rangées en hauteur dans le tableau. Dans ce cas, les cellules de la rangée en dessous ne disparaîtront pas, notre cellule élargie les déplacera et le tableau s'effondrera. Pour éviter cela, il faut supprimer une des cellules de la rangée en dessous. Reportez-vous aux exemples pour une meilleure compréhension.

Exemple . Tableau sans fusions

Regardons un tableau sans fusions, avec 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 . Agrandissons une cellule sur deux rangées

Maintenant, agrandissons la cellule 1 sur deux rangées, en lui attribuant l'attribut rowspan avec la valeur 2. Nous verrons qu'elle déplace les cellules de la rangée en dessous et le tableau s'effondre :

<table>
	<tr>
		<td rowspan="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 . Agrandissons une cellule sans effondrement du tableau

Pour corriger le problème d'effondrement du tableau de l'exemple précédent, essayons de supprimer une des cellules de la deuxième rangée (et ce n'est pas nécessairement la cellule 4 qui se trouve directement sous notre cellule 1, on peut supprimer n'importe laquelle, nous supprimerons la cellule numéro 5) :

<table>
	<tr>
		<td rowspan="2">cell1</td>
		<td>cell2</td>
		<td>cell3</td>
	</tr>
	<tr>
		<td>cell4</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 . Agrandissons une cellule sur `3` rangées

Ici, agrandissons notre cellule non pas sur deux rangées, mais sur 3, en lui attribuant rowspan avec la valeur 3. Dans ce cas, supprimons une des cellules de la troisième rangée (la cellule 7, 8 ou 9 - peu importe), pour que le tableau ne s'effondre pas :

<table>
	<tr>
		<td rowspan="3">cell1</td>
		<td>cell2</td>
		<td>cell3</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell9</td>
	</tr>
</table>

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

Exemple . Agrandissons encore sur `2` colonnes

Agrandissons également la cellule 2 sur 2 colonnes en plus de la première cellule. Pour cela, on ajoute à la cellule 2 l'attribut colspan avec la valeur 2. Dans ce cas, supprimons la cellule 3, pour que le tableau ne s'effondre pas :

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

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

Voir aussi

l'attribut colspan,
qui fusionne les colonnes d'un tableau