Quando usar (e quando não usar) tabelas

Você já aprendeu a construir tabelas HTML de forma estruturada e acessível. Agora, a pergunta mais importante é: quando devo usar uma tabela?

A resposta é simples, mas crucial: tabelas são para dados tabulares. Ou seja, informações que têm uma relação natural de linhas e colunas, onde cada célula faz sentido no contexto de seu cabeçalho de linha e coluna.

✅ Quando usar tabelas: dados tabulares

Pense em dados que você normalmente veria em uma planilha ou em um relatório. Se a informação faz sentido em uma grade de linhas e colunas, é um bom candidato para <table>.

Exemplos de uso correto:

1. Relatórios financeiros: Balanços, extratos, orçamentos.

    <table>
      <caption>Balanço Financeiro Mensal - Maio 2026</caption>
      <thead>
        <tr>
          <th scope="col">Categoria</th>
          <th scope="col">Receitas</th>
          <th scope="col">Despesas</th>
          <th scope="col">Lucro/Prejuízo</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Vendas de Produtos</th>
          <td>R$ 15.000,00</td>
          <td>R$ 5.000,00</td>
          <td>R$ 10.000,00</td>
        </tr>
        <tr>
          <th scope="row">Serviços</th>
          <td>R$ 8.000,00</td>
          <td>R$ 2.000,00</td>
          <td>R$ 6.000,00</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th scope="row">Total</th>
          <td>R$ 23.000,00</td>
          <td>R$ 7.000,00</td>
          <td>R$ 16.000,00</td>
        </tr>
      </tfoot>
    </table>

2. Horários e agendamentos: Grade de aulas, programação de eventos, horários de funcionamento.

    <table>
      <caption>Horário de Aulas - Turma Front-end B</caption>
      <thead>
        <tr>
          <th></th>
          <th scope="col">Segunda</th>
          <th scope="col">Terça</th>
          <th scope="col">Quarta</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">09:00 - 10:00</th>
          <td>HTML Avançado</td>
          <td>CSS Grid</td>
          <td>JavaScript Básico</td>
        </tr>
        <tr>
          <th scope="row">10:00 - 11:00</th>
          <td>CSS Flexbox</td>
          <td>HTML Semântico</td>
          <td>JavaScript DOM</td>
        </tr>
      </tbody>
    </table>

3. Comparativos de produtos/serviços: Planos de celular, especificações de eletrônicos, preços de softwares.

    <table>
      <caption>Comparativo de Planos de Hospedagem</caption>
      <thead>
        <tr>
          <th>Recurso</th>
          <th scope="col">Plano Básico</th>
          <th scope="col">Plano Pro</th>
          <th scope="col">Plano Premium</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Espaço em Disco</th>
          <td>10 GB</td>
          <td>50 GB</td>
          <td>Ilimitado</td>
        </tr>
        <tr>
          <th scope="row">Bancos de Dados</th>
          <td>1</td>
          <td>5</td>
          <td>Ilimitado</td>
        </tr>
        <tr>
          <th scope="row">Suporte 24/7</th>
          <td>Não</td>
          <td>Sim</td>
          <td>Sim</td>
        </tr>
      </tbody>
    </table>

4. Listas de dados: Catálogos de produtos, listas de membros, resultados de pesquisas.

    <table>
      <caption>Lista de Membros Ativos</caption>
      <thead>
        <tr>
          <th scope="col">Nome</th>
          <th scope="col">Email</th>
          <th scope="col">Data de Inscrição</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>João Silva</td>
          <td>joao@email.com</td>
          <td>2023-01-15</td>
        </tr>
        <tr>
          <td>Maria Souza</td>
          <td>maria@email.com</td>
          <td>2023-03-20</td>
        </tr>
      </tbody>
    </table>

❌ Quando NÃO usar tabelas: layout de página

Este é o erro mais comum e grave no uso de tabelas. Tabelas não devem ser usadas para posicionar elementos na página.

No passado, antes do CSS ser amplamente suportado, era comum ver sites inteiros construídos com tabelas aninhadas para criar colunas, cabeçalhos e rodapés. Isso é conhecido como "table layout" e é uma péssima prática.

Por que NÃO usar tabelas para layout?

1. Acessibilidade:

   • Leitores de tela interpretam a tabela como dados, não como estrutura visual. Isso confunde o usuário, que ouve "tabela com 3 colunas e 5 linhas" quando esperava um menu de navegação e um conteúdo principal.
   • A ordem de leitura pode ser lógica para a tabela, mas ilógica para o layout, dificultando a navegação.

2. Responsividade:

   • Tabelas são inerentemente rígidas. Adaptá-las a diferentes tamanhos de tela (especialmente em dispositivos móveis) é extremamente difícil e geralmente resulta em rolagem horizontal indesejada ou quebra do layout.
   • Com CSS, você pode reorganizar o layout para telas menores de forma fluida.

3. Manutenção do Código:

   • Tabelas para layout geram HTML excessivamente complexo e aninhado, tornando o código difícil de ler, entender e modificar.
   • Pequenas alterações no design podem exigir grandes mudanças na estrutura da tabela.

4. Performance:

   • Tabelas complexas podem ser mais lentas para renderizar, pois o navegador precisa calcular toda a estrutura antes de exibir o conteúdo.
   • O HTML fica mais "pesado" com tags desnecessárias.

5. Separação de Preocupações:

   • O HTML deve cuidar da estrutura e semântica do conteúdo. O CSS deve cuidar da apresentação e layout.
   • Usar tabelas para layout mistura essas preocupações, violando um princípio fundamental do desenvolvimento web.

Alternativas para layout (use CSS!):

• Flexbox: Para layouts unidimensionais (linhas ou colunas). Excelente para menus de navegação, alinhamento de itens, etc.
• CSS Grid: Para layouts bidimensionais (linhas e colunas). Perfeito para layouts de página complexos, como cabeçalhos, barras laterais e rodapés.
• Outras propriedades CSS: float, position, display: block/inline-block também podem ser usadas para layout, embora Flexbox e Grid sejam as soluções modernas e mais robustas.

dl vs. table: quando usar qual?

Na lição de listas de definição, vimos que <dl> é para pares de termo e descrição. Uma dúvida comum é quando usar <dl> e quando usar <table> para dados que parecem ter uma relação de rótulo-valor.

<!-- ✅ dl: Especificações de UM produto -->
<h2>Especificações do Smartphone X</h2>
<dl>
  <dt>Processador</dt>
  <dd>Snapdragon 8 Gen 2</dd>
  <dt>RAM</dt>
  <dd>12 GB</dd>
  <dt>Armazenamento</dt>
  <dd>256 GB</dd>
</dl>

<!-- ✅ table: Comparativo de DOIS produtos -->
<h2>Comparativo de Smartphones</h2>
<table>
  <thead>
    <tr>
      <th>Recurso</th>
      <th scope="col">Smartphone X</th>
      <th scope="col">Smartphone Y</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Processador</th>
      <td>Snapdragon 8 Gen 2</td>
      <td>Dimensity 9200+</td>
    </tr>
    <tr>
      <th scope="row">RAM</th>
      <td>12 GB</td>
      <td>16 GB</td>
    </tr>
    <tr>
      <th scope="row">Armazenamento</th>
      <td>256 GB</td>
      <td>512 GB</td>
    </tr>
  </tbody>
</table>

Resumindo

• Use tabelas APENAS para dados tabulares: informações que fazem sentido em uma grade de linhas e colunas.
• NUNCA use tabelas para layout de página: isso prejudica a acessibilidade, a responsividade, a manutenção e a performance. Use CSS (Flexbox, Grid) para layout.
• Para pares de rótulo/valor de um único item, prefira <dl>. Para dados que precisam ser comparados em múltiplas colunas ou que representam múltiplos registros, use <table>.