Atributo rowspan

O atributo rowspan controla a união de linhas em uma tabela HTML. Aplicado às tags th e td.

Valor aceito: número inteiro a partir de 1.

Como usar: adicionamos este atributo a qualquer célula td ou th. Se, por exemplo, definirmos rowspan com o valor 2 - a célula à qual foi atribuído ocupará duas linhas na altura da tabela. Neste caso, as células da linha abaixo não desaparecem, nossa célula expandida as deslocará e a tabela ficará desorganizada. Para evitar isso, é necessário remover uma das células da linha abaixo. Veja os exemplos para um melhor entendimento.

Exemplo . Tabela sem uniões

Vejamos uma tabela sem uniões, com a qual trabalharemos a seguir:

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

Exemplo . Expandindo uma célula para duas linhas

Agora vamos expandir a célula 1 para duas linhas, definindo o atributo rowspan com o valor 2. Veremos que ela desloca as células da linha abaixo e a tabela fica desorganizada:

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

Exemplo . Expandindo uma célula sem desorganizar a tabela

Para corrigir o problema de desorganização da tabela do exemplo anterior, vamos tentar remover uma das células da segunda linha (e não precisa ser a célula 4 que está diretamente abaixo da nossa célula 1, pode-se remover qualquer uma, removeremos a célula de 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;
}

Exemplo . Expandindo uma célula para `3` linhas

Aqui vamos expandir nossa célula não para duas linhas, mas para 3, definindo rowspan com o valor 3. Ao mesmo tempo, removemos uma das células da terceira linha (célula 7, 8 ou 9 - não importa), para que a tabela não fique desorganizada:

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

Exemplo . Expandindo também para `2` colunas

Vamos expandir também a célula 2 para 2 colunas, além da primeira célula. Para isso, adicionamos colspan à célula 2 com o valor 2. Ao mesmo tempo, removemos a célula 3, para que a tabela não fique desorganizada:

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

Veja também

atributo colspan,
que une colunas da tabela