Atributo rowspan

El atributo rowspan controla la combinación de filas en una tabla HTML. Se aplica a las etiquetas th y td.

Valor aceptado: número entero comenzando desde 1.

Cómo usarlo: agregamos este atributo a cualquier celda td o th. Si, por ejemplo, establecemos rowspan en el valor 2 - la celda a la que se le asignó ocupará dos filas de altura en la tabla. Al mismo tiempo, las celdas de la fila inferior no desaparecerán, nuestra celda expandida las desplazará y la tabla se desorganizará. Para evitar que esto suceda, es necesario eliminar una de las celdas de la fila inferior. Consulte los ejemplos para una mejor comprensión.

Ejemplo . Tabla sin combinaciones

Veamos una tabla sin combinaciones, con la que trabajaremos más adelante:

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

Ejemplo . Expandamos la celda a dos filas

Y ahora expandamos la celda 1 a dos filas, asignándole el atributo rowspan con el valor 2. Veremos que desplaza a las celdas de la fila debajo de ella y la tabla se desorganiza:

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

Ejemplo . Expandamos la celda sin desorganizar la tabla

Para corregir el problema de desorganización de la tabla del ejemplo anterior, intentemos eliminar una de las celdas de la segunda fila (y no necesariamente la celda 4, que está directamente debajo de nuestra celda 1, se puede eliminar cualquier otra, eliminaremos la celda número 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;
}

Ejemplo . Expandamos la celda a `3` filas

Y aquí expandamos nuestra celda no a dos filas, sino a 3, asignándole rowspan con el valor 3. Al mismo tiempo, eliminemos una de las celdas de la tercera fila (celda 7, 8 o 9 - no importa cuál), para que la tabla no se desorganice:

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

Ejemplo . Expandamos también a `2` columnas

Expandamos también la celda 2 a 2 columnas además de la primera celda. Para esto, a la celda 2 le agregamos colspan con el valor 2. Al mismo tiempo, eliminamos la celda 3, para que la tabla no se desorganice:

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

Véase también

atributo colspan,
que combina columnas de tabla