Tabelas no HTML

HTMLBoas Práticas

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?

Plano	Preço	Suporte
Básico	R$ 99	E-mail
Pro	R$ 199	Chat
Premium	R$ 399	Prioritário

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

Tabelas no HTML

O que são tabelas no HTML?

Quando faz sentido usar uma tabela?

Casos comuns?

Exemplo de dado tabular?

Quando não faz sentido usar tabela?

Por quê?

Regra prática?

O que é a tag <table>?

Exemplo básico?

O que normalmente pode existir dentro de table?

O que é a tag <caption>?

Exemplo?

Por que caption é importante?

Regra prática?

O que é a tag <thead>?

Exemplo?

Por que isso é útil?

Benefícios?

O que é a tag <tbody>?

Exemplo?

Por que usar tbody?

O que é a tag <tfoot>?

Exemplo?

Quando usar?

O que é a tag <tr>?

Exemplo?

Onde tr aparece?

Regra prática?

O que é a tag <th>?

Exemplo de cabeçalho de coluna?

Exemplo de cabeçalho de linha?

Por que th é importante?

O que faz o atributo scope em <th>?

Exemplo com cabeçalho de coluna?

Exemplo com cabeçalho de linha?

Por que isso importa?

Regra prática?

O que é a tag <td>?

Exemplo?

Quando usar?

Diferença entre th e td?

O que é a tag <colgroup>?

Exemplo?

Quando usar?

Observação?

O que é a tag <col>?

Exemplo?

Quando usar?

Como montar uma tabela simples e correta?

Exemplo?

O que esse exemplo tem de bom?

Como montar uma tabela com rodapé?

Exemplo?

Quando isso é útil?

Como montar uma tabela com colunas configuradas?

Exemplo?

Como pensar em acessibilidade em tabelas?

Boas práticas?

Por que isso importa?

Tabela simples ou lista? Como decidir?

Use tabela quando?

Use lista quando?

Exemplo que talvez não precise ser tabela?

Exemplo que pede tabela?

Regra prática?

Como lidar com tabelas grandes?

Boas práticas?

Importante?

O que evitar em tabelas?

Usar tabela para layout?

Misturar cabeçalhos e dados sem critério?

Não usar th quando existe cabeçalho?

Não identificar a tabela?

Criar tabelas desnecessárias?

Colocar conteúdo demais em uma célula?

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

Essa célula nomeia uma coluna?

Essa célula nomeia uma linha?

Essa célula apenas apresenta um valor?

O que é a tag `<table>`?

O que normalmente pode existir dentro de `table`?

O que é a tag `<caption>`?

Por que `caption` é importante?

O que é a tag `<thead>`?

O que é a tag `<tbody>`?

Por que usar `tbody`?

O que é a tag `<tfoot>`?

O que é a tag `<tr>`?

Onde `tr` aparece?

O que é a tag `<th>`?

Por que `th` é importante?

O que faz o atributo `scope` em `<th>`?

O que é a tag `<td>`?

Diferença entre `th` e `td`?

O que é a tag `<colgroup>`?

O que é a tag `<col>`?

Não usar `th` quando existe cabeçalho?

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

Não usar `th` em cabeçalhos?

Ignorar `scope`?

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