No tutorial passado do nosso curso de HTML, nós destrinchamos como estruturar o corpo, cabeçalho e rodapé de uma tabela usando as tags thead, tbody e tfoot. Essa segmentação semântica deixou nossas tabelas perfeitamente organizadas para os motores de busca e leitores de tela. Mas sejamos sinceros: até agora, nossas células estão muito engessadas.
No mundo real do desenvolvimento front-end, os dados tabulares quase nunca são perfeitamente simétricos. Você frequentemente precisará criar relatórios, cronogramas ou tabelas de preços onde uma única célula precisa se esticar para abranger várias colunas ou linhas consecutivas. Nesta aula da nossa Apostila de HTML completa, você vai aprender como dominar a mesclagem de células utilizando os poderosos atributos colspan e rowspan. Pegue o seu café e vamos evoluir esse código!
colspan ou rowspan para criar o layout visual de um site (como posicionar menus, banners ou barras laterais), fuja! Fazer isso quebra a responsividade mobile no viewport e gera punições severas no algoritmo do Google. Hoje em dia, layouts estruturais são feitos exclusivamente com <div> combinadas com Flexbox ou CSS Grid. Tabelas servem estritamente para exibir dados estatísticos e tabulares reais.
Os Atributos colspan e rowspan - Expandindo Células
Os atributos colspan e rowspan em HTML servem para expandir uma célula por múltiplas colunas ou linhas dentro de uma tabela. O atributo colspan realiza a mesclagem horizontal (eixo X), esticando a célula para a direita, enquanto o rowspan realiza a mesclagem vertical (eixo Y), esticando a célula para baixo.
Até este exato momento, nossas tabelas estavam operando no modo padrão e simétrico: linha abaixo de linha, coluna ao lado de coluna, criando aquela grade uniforme parecendo uma planilha antiga do Excel. Mas nem tudo na vida do programador é estático. Para criar interfaces ricas e dinâmicas, precisamos customizar a anatomia física da nossa tag <td> (ou <th>).
Para você nunca mais precisar decorar esses comandos feito um robô, pare um segundo e analise a etimologia das palavras em inglês (os criadores do HTML sempre facilitam as coisas para quem entende os termos):
- col (origem de column / coluna) + span (significa expandir, abranger). Ou seja: expandir por colunas.
- row (significa linha) + span (expandir, abranger). Ou seja: expandir por linhas.
Viu como é ridiculamente óbvio? Sabendo disso, basta olhar para a sua tabela, contar o espaço que a informação exige e aplicar o número correspondente dentro do atributo adequado.
O Atributo colspan em HTML: Mesclagem Horizontal
Existem tabelas onde uma linha específica — geralmente a faixa principal do cabeçalho (<thead>) ou a área de fechamento de dados no rodapé (<tfoot>) — necessita ocupar o espaço horizontal inteiro para não quebrar a simetria visual do documento. É aqui que o colspan entra em ação.
Vamos relembrar a tabela estruturada de linguagens de programação que construímos no tutorial anterior. O código bruto original dela se comportava assim:
<table border="1">
<caption>Linguagens de programação</caption>
<thead>
<tr><td>Tipos de linguagem</td></tr>
</thead>
<tfoot>
<tr><td>by HTML Progressivo</td></tr>
</tfoot>
<tbody>
<tr>
<td>Linguagem\Uso</td>
<th>Web</th>
<th>Desktop</th>
</tr>
<tr><th>HTML</th><td>X</td><td></td></tr>
<tr><th>JavaScript</th><td>X</td><td></td></tr>
<tr><th>C</th><td></td><td>X</td></tr>
<tr><th>C++</th><td></td><td>X</td></tr>
<tr><th>PHP</th><td>X</td><td></td></tr>
<tr><th>Java</th><td></td><td>X</td></tr>
</tbody>
</table>Ao renderizar o código acima, as linhas do cabeçalho e do rodapé geravam uma quebra estética bizarra. Como cada uma continha apenas uma única célula declarada, elas ficavam restritas ao tamanho da primeira coluna, deixando as colunas "Web" e "Desktop" com um espaço vazio flutuante acima e abaixo delas.
Para arrumar essa casa, precisamos fazer com que essas células isoladas assumam a largura equivalente a três colunas. Substituímos as linhas problemáticas aplicando colspan="3". Veja o ajuste cirúrgico abaixo:
<thead>
<tr><td colspan="3">Tipos de linguagem</td></tr>
</thead>
<tfoot>
<tr><td colspan="3">by HTML Progressivo</td></tr>
</tfoot>O resultado imediato é uma tabela perfeitamente unificada. Mas podemos ir além e profissionalizar o visual centralizando o texto. Se você se recorda das nossas primeiras aulas de formatação de texto, utilizávamos o atributo align="center" para o alinhamento. Combinando ambos os atributos, nossa estrutura ganha um design muito mais elegante:
| Tipos de linguagem | ||
| by HTML Progressivo | ||
| Linguagem\Uso | Web | Desktop |
| HTML | X | |
| JavaScript | X | |
| C | X | |
| C++ | X | |
| PHP | X | |
| Java | X | |
💡 Estude Offline Sem Interrupções e Conquiste Sua Vaga Front-End
Aprender a programar exige foco absoluto. Se você quer acelerar sua evolução eliminando distrações e ter um material completo de consulta rápida, baixe o nosso material estruturado.
"Eu passava horas tentando entender como alinhar dados complexos em tabelas sem destruir o layout, essa apostila clareou toda a semântica!" - Carlos, Desenvolvedor Front-End.
O Atributo rowspan em HTML: Mesclagem Vertical
Uma outra maneira muito comum e elegante de representar essa exata mesma tabela de tecnologias é utilizando um modelo de apenas duas colunas primárias. Na primeira coluna, agrupamos os escopos funcionais de maneira direta ("Linguagens para Web" e "Linguagens para Desktop") e, na segunda coluna, listamos os nomes das ferramentas correspondentes.
Como reservamos 3 exemplos de tecnologias para o universo Web e mais 3 para ambiente Desktop, nosso corpo (<tbody>) terá um total exato de 6 linhas. Se fôssemos estruturar isso no HTML padrão sem recorrer à inteligência de mesclagem vertical, o código seria entupido de células vazias repetitivas, ficando assim:
<table border="1">
<caption>Linguagens de programação</caption>
<thead>
<tr><td colspan="2" align="center"><b>Tipos de linguagem</b></td></tr>
</thead>
<tfoot>
<tr><td colspan="2" align="center"><i>by HTML Progressivo</i></td></tr>
</tfoot>
<tbody>
<tr>
<td>Linguagens<br>para Web</td> <td>HTML</td>
</tr>
<tr><td></td><td>JavaScript</td></tr>
<tr><td></td><td>PHP</td></tr>
<tr>
<td>Linguagens<br>para Desktop</td> <td>C</td>
</tr>
<tr><td></td><td>C++</td></tr>
<tr><td></td><td>Java</td></tr>
</tbody>
</table>Fica óbvio qual é o propósito dos dados ao bater o olho na tela, mas concordemos que aquelas células fantasmas totalmente vazias representadas por <td></td> tornam a marcação suja, confusa e nada profissional.
A solução inteligente do HTML5 é remover as marcas vazias redundantes e configurar a célula mestre da categoria para se esticar para baixo e assumir o tamanho equivalente a 3 linhas físicas. Fazemos isso acionando a propriedade rowspan="3" nas linhas de entrada de cada bloco.
Acompanhe atentamente a engenharia por trás do código fonte otimizado:
<table border="1">
<caption>Linguagens de programação</caption>
<!-- NOTA DE SEO: Ajustamos o colspan de 3 para 2, pois a tabela agora só possui duas colunas -->
<thead>
<tr><td colspan="2" align="center"><b>Tipos de linguagem</b></td></tr>
</thead>
<tfoot>
<tr><td colspan="2" align="center"><i>by HTML Progressivo</i></td></tr>
</tfoot>
<tbody>
<!-- Bloco de ferramentas Web -->
<tr>
<td rowspan="3" style="vertical-align: middle; font-weight: bold;">Linguagens<br>para Web</td>
<td>HTML</td>
</tr>
<tr>
<td>JavaScript</td>
</tr>
<tr>
<td>PHP</td>
</tr>
<!-- Bloco de ferramentas Desktop -->
<tr>
<td rowspan="3" style="vertical-align: middle; font-weight: bold;">Linguagens<br>para Desktop</td>
<td>C</td>
</tr>
<tr>
<td>C++</td>
</tr>
<tr>
<td>Java</td>
</tr>
</tbody>
</table>E o resultado gerado na tela é a belíssima e compacta tabela estruturada abaixo:
| Tipos de linguagem | |
| by HTML Progressivo | |
| Linguagens para Web |
HTML |
| JavaScript | |
| PHP | |
| Linguagens para Desktop |
C |
| C++ | |
| Java | |
Interessante demais, não é? Mas preste muita atenção em uma sacada de engenharia de código que deixei passar de propósito no início e que muitos programadores juniores erram no mercado: note que agora nós temos somente duas colunas reais em nossa estrutura.
Portanto, nós tivemos que ajustar cirurgicamente o valor numérico do atributo colspan das seções de cabeçalho e rodapé! Enquanto no exemplo passado ele era configurado igual a 3, agora ele foi redefinido exatamente para 2. Se tivéssemos deixado o valor antigo, o navegador iria renderizar colunas fantasmas quebradas na lateral da viewport.
rowspan="3" em uma linha (<tr>), aquela célula automaticamente rouba e reserva o espaço inicial das próximas duas linhas inferiores. Logo, as duas próximas tags <tr> do seu código fonte deverão obrigatoriamente conter uma tag td a menos em suas declarações! Se você esquecer essa regra e mantiver duas células nelas, os dados excedentes serão empurrados para a direita, estragando todo o alinhamento.
Dominar essas técnicas nos dá um poder completo de manipulação de dados no front-end. E se você deseja expandir de forma massiva as suas competências de programação e arquitetura de software, aproveite o embalo para conferir o nosso curso completo focado em lógica estrutural e linguagens robustas acessando nossos guias práticos de [INSERIR LINK: CURSO PHP], JavaScript, Java, Python, Perl, Assembly, C e C++!
Perguntas Frequentes sobre Mesclagem de Células (FAQ)
Qual a diferença essencial entre os atributos colspan e rowspan?
colspan realiza uma expansão horizontal, fundindo a célula atual com as colunas localizadas à sua direita. O atributo rowspan atua no sentido vertical, esticando o tamanho físico da célula para baixo e ocupando o espaço das linhas subsequentes.
Posso usar colspan e rowspan na mesma célula ao mesmo tempo?
<td colspan="2" rowspan="2">). Isso cria uma supercélula em bloco capaz de abranger duas colunas de largura e duas linhas de altura simultaneamente, recurso muito comum na montagem de painéis, dashboards estatísticos e tabelas financeiras de alto nível.
O que acontece se eu errar o número da contagem de linhas no rowspan?
Próximos artigos que você deve ler para dominar tabelas:
- Como Adicionar Bordas e Espaçamentos Internos em Células usando CSS
- Entendendo a Tag colgroup e col para Estilização em Massa de Colunas
- Táticas Avançadas de CSS para Tornar Tabelas HTML Totalmente Responsivas
Nenhum comentário:
Postar um comentário