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:

html<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>

csstable, 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:

html<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>

csstable, 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):

html<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>

csstable, 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:

html<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>   

csstable, 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:

html<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>

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

Результат:

Veja também