Apresentar relatórios financeiros, cronogramas de aulas, tabelas de planos e comparações de especificações técnicas exige uma estrutura bidimensional clara dividida em linhas e colunas. No HTML, isso é construído através da família de tags <table>. Nesta aula, você aprenderá a arquitetura semântica completa de uma tabela profissional, como mesclar células com colspan e rowspan e como torná-las 100% acessíveis e responsivas para smartphones.

1. Para Que Servem Tabelas? (Dados Tabulares vs Layout)

Antes de começarmos a codificar, guarde uma regra histórica crucial da engenharia web:

• Para que servem: Tabelas servem exclusivamente para exibir dados tabulares (informações que fazem sentido ao serem cruzadas entre linhas e colunas, como uma planilha do Excel).
• Para que NÃO servem: Nunca utilize tabelas para montar o layout visual de um site (posicionar cabeçalho na linha de cima, menu na coluna da esquerda e rodapé na linha de baixo). Isso era uma prática desesperada dos anos 90 que foi abolida pelo W3C. Hoje, layouts são construídos com HTML semântico e CSS moderno (Flexbox e Grid).

2. A Anatomia Semântica de uma Tabela Completa

Uma tabela profissional e moderna no HTML5 é composta por 8 tags estruturadas em perfeita hierarquia:

3. Mesclando Células com colspan e rowspan

Frequentemente precisamos expandir uma célula para que ela ocupe o espaço de várias colunas ou várias linhas simultâneas (o equivalente ao botão “Mesclar Células” do Excel):

• colspan="N" (de Column Span): Expande a célula horizontalmente ao longo de N colunas.
• rowspan="N" (de Row Span): Expande a célula verticalmente ao longo de N linhas.

<!-- Exemplo de colspan cobrindo 2 colunas: -->
<tr>
  <td colspan="2">Este dado ocupa duas colunas inteiras de largura</td>
</tr>
 
<!-- Exemplo de rowspan cobrindo 2 linhas: -->
<tr>
  <td rowspan="2">Categoria Unificada para as duas próximas linhas</td>
  <td>Item 1</td>
</tr>
<tr>
  <td>Item 2</td>
</tr>

4. Acessibilidade em Tabelas (WCAG & Atributo scope)

Para que pessoas com deficiência visual consigam compreender tabelas com tecnologias assistivas, o W3C exige o uso do atributo scope dentro de cada tag <th>:

• <th scope="col">: Informa que este título se refere a toda a coluna vertical abaixo dele.
• <th scope="row">: Informa que este título se refere a toda a linha horizontal à sua direita.

Assim, quando o usuário de leitor de tela navega pelas células de dados no meio da tabela, o software anuncia o valor acompanhado do título correspondente (ex: “Preço: R$ 80,00” em vez de ler apenas “R$ 80,00” sem contexto).

5. Como Tornar Tabelas Responsivas em Smartphones

Tabelas largas com muitas colunas tendem a “estourar” a tela de smartphones de 360px de largura. A melhor prática recomendada é envolver a tabela em um contêiner com rolagem horizontal suave:

<div class="wzw-table-responsive" style="overflow-x: auto;">
  <table class="wzw-table">
    <!-- Toda a sua tabela aqui dentro -->
  </table>
</div>

6. Exemplo Prático de Tabela Completa e Semântica

Veja abaixo uma tabela completa de planos com caption, thead, tbody, tfoot e colspan:

<div class="wzw-table-responsive">
  <table class="wzw-table">
    <caption>Comparativo de Matrículas da Web Academy (2026)</caption>
    <thead>
      <tr>
        <th scope="col">Plano de Ensino</th>
        <th scope="col">Cursos Inclusos</th>
        <th scope="col">Acesso ao Playground</th>
        <th scope="col">Mensalidade</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Comunitário</th>
        <td>HTML5 & CSS3 Básico</td>
        <td>Ilimitado</td>
        <td><strong>Grátis</strong></td>
      </tr>
      <tr>
        <th scope="row">Profissional Pro</th>
        <td>Trilha Front-End Completa</td>
        <td>Ilimitado + Suporte VIP</td>
        <td>R$ 49,00 / mês</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="3">* Valores promocionais por tempo limitado.</td>
        <td>Sem fidelidade</td>
      </tr>
    </tfoot>
  </table>
</div>

7. Ferramentas Web-ZoneWare para Gerar e Converter Tabelas

Gere códigos de tabelas sem precisar digitar cada tag manualmente:

• Gerador de Tabelas HTML e CSS: Crie grades visuais interativas, configure cores e copie o código pronto com 1 clique.
• Converter Excel em Tabelas HTML: Cole suas linhas do Excel ou Google Sheets e converta em código HTML semântico instantaneamente.
• Conversor de Imagem para Tabela HTML: Transforme capturas de tela e tabelas em imagens diretamente em código estruturado.
• Playground Web IDE: Pratique a aplicação de estilos modernos e responsivos em tabelas.

8. Links Oficiais de Autoridade

• W3C WAI — Tutorial de Acessibilidade em Tabelas Web: As diretrizes completas de usabilidade para tabelas.
• MDN Web Docs — O Elemento de Tabela (<table>): O guia definitivo da Mozilla.
• WHATWG HTML Specification — Tabular Data Standards: As regras formais de especificação de dados tabulares.

9. Exercício Prático da Lição 13

1. Abra o Playground Web IDE.
2. Crie uma tabela de horários de aula contendo:
   • Uma legenda descritiva com <caption>.
   • Um cabeçalho <thead> com 3 colunas: “Dia da Semana”, “Matéria” e “Horário”.
   • Um corpo <tbody> com 3 linhas de dados preenchidos.
   • Adicione os atributos scope="col" nos cabeçalhos para treinar a acessibilidade.
3. Experimente mesclar duas matérias iguais de dias seguidos utilizando o atributo rowspan="2"!