Atributo colspan

O atributo colspan controla a fusão de colunas em tabelas HTML. Aplica-se às tags th e td.

Valor aceito: número inteiro começando em 1.

Como usar: adicionamos este atributo a qualquer célula td ou th. Se, por exemplo, definirmos colspan com o valor 2 - a célula à qual foi atribuída ocupará duas colunas da tabela. Com isso, as células vizinhas à direita não desaparecerão, nossa célula expandida as deslocará e a tabela ficará desorganizada. Para evitar isso, é necessário remover uma das células à direita. Veja os exemplos para melhor compreensão.

Exemplo . Tabela sem fusões

Vamos dar uma olhada em uma tabela sem fusõ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 colunas

Vamos tentar expandir a célula 1 para duas colunas, definindo o atributo colspan com o valor 2. Com isso, ela deslocará as células à direita e a tabela ficará desorganizada:

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

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

Результат:

Exemplo . Expandindo uma célula sem desorganizar a tabela

Agora vamos tentar corrigir o problema de desorganização da tabela do exemplo anterior, removendo uma das células à direita da nossa (é a célula 2 ou 3 - tanto faz):

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

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

Результат:

Exemplo . Expandindo uma célula para três colunas

Vamos expandir a célula 1 para 3 colunas e definir seu atributo colspan com o valor 3. Com isso, removemos mais uma célula à direita, para que a tabela não fique desorganizada:

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

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

Результат:

Exemplo . Colspan e rowspan simultaneamente

Vamos tentar unir as células de número 4, 5, 7 e 8, utilizando os atributos colspan e rowspan (as fusões anteriores foram removidas da tabela):

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

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

Результат:

Veja também