Tabelas no HTML

Tabelas continuam sendo essenciais na web quando o objetivo é exibir dados estruturados em linhas e colunas.
Neste post, você vai entender como usar as principais tags de tabela do HTML com semântica, organização, acessibilidade e clareza.

O que são tabelas no HTML?

Tabelas são estruturas usadas para representar dados tabulares.

Isso significa informações que fazem sentido quando organizadas em:

• linhas
• colunas
• cabeçalhos
• relações entre células

No HTML, tabelas não existem para montar layout visual da página.
Elas existem para exibir dados que realmente possuem natureza tabular.

Quando faz sentido usar uma tabela?

Uma tabela faz sentido quando o conteúdo depende da leitura cruzada entre linhas e colunas.

Casos comuns?

• comparação de planos
• relatórios
• listas de preços
• agendas
• cronogramas
• resultados
• métricas
• inventários
• tabelas financeiras
• status de processos
• listagens administrativas

Exemplo de dado tabular?

Esse tipo de conteúdo faz sentido em tabela porque cada valor depende da relação com sua coluna e sua linha.

Quando não faz sentido usar tabela?

Não use tabela para:

• layout de página
• posicionamento visual
• alinhar blocos por costume antigo
• simular grid de interface
• criar colunas de conteúdo editorial

Por quê?

Porque layout é responsabilidade de CSS, não de tabela.

Regra prática?

Se o conteúdo não precisa de leitura em linhas e colunas, provavelmente não deve ser tabela.

O que é a tag <table>?

A tag <table> é o container principal da tabela.

Ela envolve toda a estrutura tabular.

Exemplo básico?

<table>
  <tr>
    <th>Plano</th>
    <th>Preço</th>
  </tr>
  <tr>
    <td>Básico</td>
    <td>R$ 99</td>
  </tr>
</table>

O que normalmente pode existir dentro de table?

• caption
• colgroup
• thead
• tbody
• tfoot
• tr
• th
• td

O que é a tag <caption>?

A tag <caption> representa o título ou legenda da tabela.

Ela ajuda a identificar o conteúdo de forma clara.

Exemplo?

<table>
  <caption>
    Comparação de planos
  </caption>
  <tr>
    <th>Plano</th>
    <th>Preço</th>
  </tr>
  <tr>
    <td>Básico</td>
    <td>R$ 99</td>
  </tr>
</table>

Por que caption é importante?

Porque ajuda:

• a dar contexto à tabela
• usuários de leitores de tela
• organização semântica do documento
• identificação rápida do conteúdo tabular

Regra prática?

Se a tabela precisa ser compreendida rapidamente, caption costuma ser muito útil.

O que é a tag <thead>?

A tag <thead> agrupa o cabeçalho da tabela.

É nela que normalmente ficam os títulos das colunas.

Exemplo?

<table>
  <thead>
    <tr>
      <th>Plano</th>
      <th>Preço</th>
      <th>Suporte</th>
    </tr>
  </thead>
</table>

Por que isso é útil?

Porque separa semanticamente o cabeçalho do restante dos dados.

Benefícios?

• mais organização
• melhor leitura do código
• mais clareza estrutural
• melhor entendimento da tabela

O que é a tag <tbody>?

A tag <tbody> agrupa o corpo principal da tabela.

É nela que normalmente ficam as linhas de dados.

Exemplo?

<table>
  <tbody>
    <tr>
      <td>Básico</td>
      <td>R$ 99</td>
      <td>E-mail</td>
    </tr>
    <tr>
      <td>Pro</td>
      <td>R$ 199</td>
      <td>Chat</td>
    </tr>
  </tbody>
</table>

Por que usar tbody?

Porque deixa claro onde estão os dados centrais da tabela.

O que é a tag <tfoot>?

A tag <tfoot> agrupa o rodapé da tabela.

Ela é útil para totais, resumos, observações ou encerramento do conjunto de dados.

Exemplo?

<table>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>R$ 298</td>
      <td>-</td>
    </tr>
  </tfoot>
</table>

Quando usar?

Casos comuns:

• totais
• soma final
• médias
• resumo
• observação de encerramento
• linha final de fechamento

O que é a tag <tr>?

A tag <tr> representa uma linha da tabela.

Exemplo?

<tr>
  <td>Básico</td>
  <td>R$ 99</td>
</tr>

Onde tr aparece?

Dentro de:

• thead
• tbody
• tfoot

Regra prática?

Cada conjunto horizontal de células é uma linha, então cada linha é um tr.

O que é a tag <th>?

A tag <th> representa uma célula de cabeçalho.

Ela identifica o título de uma coluna ou de uma linha.

Exemplo de cabeçalho de coluna?

<tr>
  <th>Plano</th>
  <th>Preço</th>
  <th>Suporte</th>
</tr>

Exemplo de cabeçalho de linha?

<tr>
  <th>Básico</th>
  <td>R$ 99</td>
  <td>E-mail</td>
</tr>

Por que th é importante?

Porque ela não é apenas uma célula “em negrito”. Ela define semanticamente que aquele conteúdo é cabeçalho.

Isso ajuda:

• leitura estrutural
• acessibilidade
• entendimento entre dados e contexto

O que faz o atributo scope em <th>?

O atributo scope ajuda a indicar a qual grupo aquele cabeçalho se refere.

Os valores mais comuns são:

• col
• row

Exemplo com cabeçalho de coluna?

<th scope="col">Plano</th>

Exemplo com cabeçalho de linha?

<th scope="row">Básico</th>

Por que isso importa?

Ajuda tecnologias assistivas a entenderem com mais precisão a relação entre cabeçalhos e células.

Regra prática?

Sempre que possível, use scope em th.

O que é a tag <td>?

A tag <td> representa uma célula comum de dado.

Exemplo?

<td>R$ 99</td>

Quando usar?

Use td para valores que são dados da tabela, não cabeçalhos.

Diferença entre th e td?

• th = cabeçalho
• td = dado comum

O que é a tag <colgroup>?

A tag <colgroup> agrupa colunas da tabela.

Ela é útil para configuração estrutural ou estilização por coluna.

Exemplo?

<table>
  <colgroup>
    <col />
    <col class="coluna-preco" />
  </colgroup>
</table>

Quando usar?

Quando quiser:

• aplicar largura por coluna
• identificar colunas específicas
• facilitar estilização
• organizar estrutura da tabela

Observação?

Ela não é obrigatória em toda tabela, mas pode ser útil em tabelas maiores ou mais controladas.

O que é a tag <col>?

A tag <col> representa uma coluna dentro de colgroup.

Exemplo?

<colgroup>
  <col style="width: 40%" />
  <col style="width: 30%" />
  <col style="width: 30%" />
</colgroup>

Quando usar?

Quando precisar aplicar configuração por coluna.

Como montar uma tabela simples e correta?

Exemplo?

<table>
  <caption>
    Comparação de planos
  </caption>

  <thead>
    <tr>
      <th scope="col">Plano</th>
      <th scope="col">Preço</th>
      <th scope="col">Suporte</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">Básico</th>
      <td>R$ 99</td>
      <td>E-mail</td>
    </tr>
    <tr>
      <th scope="row">Pro</th>
      <td>R$ 199</td>
      <td>Chat</td>
    </tr>
    <tr>
      <th scope="row">Premium</th>
      <td>R$ 399</td>
      <td>Prioritário</td>
    </tr>
  </tbody>
</table>

O que esse exemplo tem de bom?

• caption para contexto
• thead para cabeçalho
• tbody para dados
• th com scope
• estrutura clara e semântica

Como montar uma tabela com rodapé?

Exemplo?

<table>
  <caption>
    Resumo de vendas
  </caption>

  <thead>
    <tr>
      <th scope="col">Produto</th>
      <th scope="col">Quantidade</th>
      <th scope="col">Total</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">Curso A</th>
      <td>12</td>
      <td>R$ 1.200</td>
    </tr>
    <tr>
      <th scope="row">Curso B</th>
      <td>8</td>
      <td>R$ 800</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th scope="row">Total geral</th>
      <td>20</td>
      <td>R$ 2.000</td>
    </tr>
  </tfoot>
</table>

Quando isso é útil?

Quando a tabela precisa de fechamento com total ou resumo.

Como montar uma tabela com colunas configuradas?

Exemplo?

<table>
  <colgroup>
    <col style="width: 40%" />
    <col style="width: 30%" />
    <col style="width: 30%" />
  </colgroup>

  <caption>
    Status de projetos
  </caption>

  <thead>
    <tr>
      <th scope="col">Projeto</th>
      <th scope="col">Status</th>
      <th scope="col">Prazo</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">Site institucional</th>
      <td>Em andamento</td>
      <td>20/03/2026</td>
    </tr>
    <tr>
      <th scope="row">Landing page</th>
      <td>Concluído</td>
      <td>05/03/2026</td>
    </tr>
  </tbody>
</table>

Como pensar em acessibilidade em tabelas?

Tabelas mal estruturadas podem ser difíceis de interpretar, especialmente para tecnologias assistivas.

Boas práticas?

• use caption quando a tabela precisar de contexto
• use th corretamente
• use scope sempre que possível
• separe thead, tbody e tfoot quando fizer sentido
• evite tabela para layout
• mantenha a lógica clara entre cabeçalhos e células

Por que isso importa?

Porque uma pessoa usando leitor de tela precisa entender:

• qual é o nome da coluna
• qual é o nome da linha
• a que cada dado se refere

Tabela simples ou lista? Como decidir?

Essa dúvida é comum.

Use tabela quando?

Houver relação entre linhas e colunas.

Use lista quando?

O conteúdo for apenas uma enumeração simples sem estrutura cruzada.

Exemplo que talvez não precise ser tabela?

• lista de benefícios
• lista de links
• checklist simples

Exemplo que pede tabela?

• comparativo de planos
• relatório mensal
• cronograma com colunas fixas
• inventário

Regra prática?

Se a leitura depende de cruzar linha e coluna, é tabela.

Como lidar com tabelas grandes?

Tabelas extensas exigem ainda mais cuidado.

Boas práticas?

• use títulos claros
• agrupe corretamente
• destaque cabeçalhos
• mantenha consistência entre colunas
• não misture tipos de dado sem necessidade
• pense na leitura em telas menores
• reduza complexidade quando possível

Importante?

Mesmo quando a tabela é correta semanticamente, o volume de dados pode exigir atenção de interface e CSS para leitura confortável.

O que evitar em tabelas?

Usar tabela para layout?

Esse é um erro clássico.

Misturar cabeçalhos e dados sem critério?

Isso quebra clareza e acessibilidade.

Não usar th quando existe cabeçalho?

Você perde semântica.

Não identificar a tabela?

Sem caption, algumas tabelas ficam pouco claras.

Criar tabelas desnecessárias?

Nem todo conjunto de informação merece virar tabela.

Colocar conteúdo demais em uma célula?

Pode dificultar leitura e entendimento.

Como decidir se uma célula deve ser th ou td?

Faça perguntas simples?

Essa célula nomeia uma coluna?

Use th.

Essa célula nomeia uma linha?

Use th.

Essa célula apenas apresenta um valor?

Use td.

Exemplo prático?

<tr>
  <th scope="row">Plano Pro</th>
  <td>R$ 199</td>
  <td>Chat</td>
</tr>

Nesse caso:

• Plano Pro é cabeçalho da linha
• os demais são dados

Como estruturar uma tabela de preços?

Exemplo?

<table>
  <caption>
    Tabela de preços dos serviços
  </caption>

  <thead>
    <tr>
      <th scope="col">Serviço</th>
      <th scope="col">Prazo</th>
      <th scope="col">Valor inicial</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">Landing page</th>
      <td>7 dias úteis</td>
      <td>R$ 1.500</td>
    </tr>
    <tr>
      <th scope="row">Site institucional</th>
      <td>15 dias úteis</td>
      <td>R$ 3.500</td>
    </tr>
    <tr>
      <th scope="row">Loja virtual</th>
      <td>25 dias úteis</td>
      <td>R$ 5.500</td>
    </tr>
  </tbody>
</table>

Por que esse formato funciona?

Porque permite comparar claramente serviço, prazo e valor.

Como estruturar uma tabela de agenda?

Exemplo?

<table>
  <caption>
    Agenda semanal
  </caption>

  <thead>
    <tr>
      <th scope="col">Dia</th>
      <th scope="col">Horário</th>
      <th scope="col">Atividade</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">Segunda</th>
      <td>09:00</td>
      <td>Reunião de alinhamento</td>
    </tr>
    <tr>
      <th scope="row">Terça</th>
      <td>14:00</td>
      <td>Apresentação do projeto</td>
    </tr>
  </tbody>
</table>

Como estruturar uma tabela administrativa?

Exemplo?

<table>
  <caption>
    Status de clientes
  </caption>

  <thead>
    <tr>
      <th scope="col">Cliente</th>
      <th scope="col">Projeto</th>
      <th scope="col">Status</th>
      <th scope="col">Próxima etapa</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">Empresa A</th>
      <td>Site institucional</td>
      <td>Em desenvolvimento</td>
      <td>Revisão de layout</td>
    </tr>
    <tr>
      <th scope="row">Empresa B</th>
      <td>Landing page</td>
      <td>Aguardando conteúdo</td>
      <td>Receber copy final</td>
    </tr>
  </tbody>
</table>

Quais são os erros mais comuns com tabelas?

Usar tabela como ferramenta de layout?

Esse é o erro mais conhecido.

Não usar th em cabeçalhos?

Isso enfraquece semântica e acessibilidade.

Ignorar scope?

Perde clareza para tecnologias assistivas.

Não identificar a tabela com caption quando necessário?

Pode dificultar entendimento.

Criar tabelas para conteúdo que deveria ser lista ou cards?

Nem todo conteúdo comparável precisa virar tabela.

Misturar estrutura de forma bagunçada?

Exemplo: cabeçalhos mal posicionados, colunas incoerentes, linhas sem padrão.

Como saber se devo usar tabela?

Faça perguntas simples?

Existe relação entre linhas e colunas?

Se sim, provavelmente é tabela.

O conteúdo precisa ser comparado em grade?

Se sim, provavelmente é tabela.

Cada dado depende de um cabeçalho de linha ou coluna?

Se sim, provavelmente é tabela.

O objetivo é apenas organizar visualmente?

Se sim, provavelmente não é tabela.

Subgrupo prático das principais tags de tabela

Estrutura principal?

• table

Identificação?

• caption

Agrupamento?

• thead
• tbody
• tfoot

Linha?

• tr

Cabeçalho?

• th

Dado?

• td

Configuração de coluna?

• colgroup
• col

Subgrupo prático das estruturas mais comuns

Tabela simples?

<table>
  <tr>
    <th>Nome</th>
    <th>Valor</th>
  </tr>
  <tr>
    <td>Item</td>
    <td>100</td>
  </tr>
</table>

Tabela semântica mais completa?

<table>
  <caption>
    Resumo mensal
  </caption>
  <thead>
    <tr>
      <th scope="col">Mês</th>
      <th scope="col">Receita</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Janeiro</th>
      <td>R$ 10.000</td>
    </tr>
  </tbody>
</table>

Tabela com rodapé?

<table>
  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td>R$ 10.000</td>
    </tr>
  </tfoot>
</table>

Tabela com colgroup?

<table>
  <colgroup>
    <col style="width: 60%" />
    <col style="width: 40%" />
  </colgroup>
</table>

Resumo prático sobre tabelas

Estrutura principal?

• table

Título da tabela?

• caption

Cabeçalho?

• thead
• th

Corpo?

• tbody
• td

Rodapé?

• tfoot

Linhas?

• tr

Colunas configuradas?

• colgroup
• col

Regras mais importantes?

• use tabela só para dados tabulares
• use th para cabeçalhos
• use scope
• use caption quando fizer sentido
• organize thead, tbody e tfoot
• não use tabela para layout

Checklist rápido para revisar uma tabela

Antes de publicar, vale conferir?

• o conteúdo realmente é tabular?
• a tabela possui cabeçalhos claros?
• os cabeçalhos usam th?
• scope foi usado quando necessário?
• a tabela tem caption, se precisar de contexto?
• thead, tbody e tfoot fazem sentido nesse caso?
• os dados estão consistentes entre colunas?
• a tabela não está sendo usada para layout?
• a leitura está clara e organizada?

Conclusão

Tabelas continuam sendo muito importantes quando usadas para o que realmente foram feitas: representar dados tabulares.

Quando você estrutura uma tabela corretamente, melhora:

• clareza
• acessibilidade
• organização
• legibilidade
• manutenção
• qualidade semântica

Dominar tabelas no HTML é entender que nem toda grade visual é uma tabela, mas que toda informação verdadeiramente tabular merece uma estrutura adequada.

Depois desse tema, o próximo passo natural costuma ser aprofundar em:

• acessibilidade e ARIA
• atributos globais
• elementos interativos
• boas práticas semânticas avançadas
• padrões de interface mais complexos