Construa Tabelas Incríveis com HTML em 12 Horas
Sobre a Aula

Mesclando Células e Colunas em Tabelas HTML

Ao avançar no uso de tabelas em HTML, é crucial entender como mesclar células e colunas para criar layouts mais complexos e informativos.

Antes de mais nada, a mesclagem de células é realizada usando os atributos rowspan e colspan. Além disso, o rowspan mescla células verticalmente, enquanto o colspan mescla horizontalmente.

<tr>
  <td rowspan="2">Célula 1</td>
  <td>Célula 2</td>
  <td>Célula 3</td>
</tr>
<tr>
  <td>Célula 4</td>
  <td>Célula 5</td>
</tr>

Ao mesmo tempo, o exemplo acima cria uma tabela com a primeira célula se estendendo por duas linhas. Em resumo, isso é útil para criar estruturas mais complexas.

<tr>
  <td colspan="3">Células Mescladas</td>
</tr>

Além disso, o colspan pode ser usado para mesclar três células em uma única célula. Em seguida, isso simplifica a exibição e leitura de dados.

Ademais, para mesclar colunas em uma única célula, basta aplicar o rowspan nas células da mesma coluna em diferentes linhas.

<tr>
  <td>Célula 1</td>
  <td rowspan="2">Célula Mesclada</td>
</tr>
<tr>
  <td>Célula 2</td>
</tr>

Finalmente agora, ao incorporar essas técnicas em suas tabelas HTML, você terá maior flexibilidade na criação de layouts sofisticados e eficientes.

Por conseguinte, a mesclagem de células e colunas é uma ferramenta valiosa para apresentar dados de maneira clara e organizada.

Entrar na conversa
Rolar para cima