HTML: Aprenda a Criar Tabelas, Estrutura, Exemplos e Dicas

O que são tabelas?

Uma tabela é uma forma de organizar informações em linhas e colunas, criando uma grade que facilita a leitura e a comparação de dados. Você já viu tabelas em planilhas, calendários, horários de ônibus e relatórios financeiros — todas seguem o mesmo princípio: agrupar dados relacionados de maneira estruturada e visualmente clara.

No contexto da web, as tabelas existem desde as primeiras versões do HTML e continuam sendo indispensáveis sempre que se precisa apresentar dados tabulares, ou seja, dados que fazem sentido quando lidos em formato de grade (linhas × colunas). Exemplos comuns incluem:

• Listas de produtos com preço, quantidade e total;
• Tabelas de horários ou cronogramas;
• Comparações de planos ou serviços;
• Relatórios de notas ou resultados.

É importante destacar que tabelas não devem ser usadas para criar layouts de página — para isso existe o CSS. O uso correto de tabelas é exclusivamente para dados que possuem uma relação tabular natural.

Tabela HTML

Segundo a documentação oficial da MDN, o elemento <table> representa dados tabulares — ou seja, informações apresentadas em uma tabela bidimensional composta por linhas e colunas de células. É o contêiner principal que agrupa todos os outros elementos da tabela.

<table>
  <!-- linhas e células ficam aqui dentro -->
</table>

Por padrão, sem CSS, a tabela não possui bordas visíveis. Todo o estilo visual deve ser definido via CSS — os atributos HTML de apresentação (border, bgcolor, cellpadding, etc.) são depreciados e não devem ser usados em código novo.

A estrutura básica de uma tabela HTML

A estrutura mínima de uma tabela é formada por três tags trabalhando juntas:

Cada <tr> representa uma linha horizontal, e dentro de cada linha os <td> representam as colunas daquela linha.

<table>
  <tr>
    <td>Nome</td>
    <td>Idade</td>
    <td>Profissão</td>
  </tr>
  <tr>
    <td>Albert</td>
    <td>27</td>
    <td>Escritor</td>
  </tr>
  <tr>
    <td>Jim</td>
    <td>57</td>
    <td>Ator</td>
  </tr>
</table>

Célula de título da tabela HTML

A tag <th> (table header) é usada para definir células de cabeçalho — aquelas que identificam o que cada coluna (ou linha) representa. Por padrão, o navegador exibe o conteúdo de <th> em negrito e centralizado, diferenciando visualmente os títulos dos dados.

Além do estilo, a tag <th> tem um papel semântico importante: leitores de tela usam ela para associar os dados às suas respectivas colunas ou linhas, tornando a tabela acessível para pessoas com deficiência visual.

O atributo scope é recomendado para deixar explícito se o cabeçalho se refere a uma coluna (scope="col") ou a uma linha (scope="row").

<table>
  <tr>
    <th scope="col">Nome</th>
    <th scope="col">Idade</th>
    <th scope="col">Profissão</th>
  </tr>
  <tr>
    <td>Albert</td>
    <td>27</td>
    <td>Escritor</td>
  </tr>
  <tr>
    <td>Jim</td>
    <td>57</td>
    <td>Ator</td>
  </tr>
</table>

Tags estruturais da tabela

Para melhorar a semântica e a acessibilidade, o HTML oferece três tags que dividem a tabela em regiões lógicas:

Essas tags não mudam a aparência visual por si só, mas permitem que navegadores e leitores de tela entendam a estrutura da tabela. Além disso, ao imprimir uma tabela longa, o <thead> e o <tfoot> podem ser repetidos em cada página automaticamente pelo navegador.

Ordem correta dos elementos — conforme a especificação HTML, os filhos de <table> devem aparecer nesta sequência: <caption> (opcional) → <colgroup> (zero ou mais) → <thead> (opcional) → <tbody> / <tr> → <tfoot> (opcional)

<table>
  <thead>
    <tr>
      <th scope="col">Nome</th>
      <th scope="col">Idade</th>
      <th scope="col">Profissão</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Albert</td>
      <td>27</td>
      <td>Escritor</td>
    </tr>
    <tr>
      <td>Jim</td>
      <td>57</td>
      <td>Ator</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Total: 2 pessoas</td>
    </tr>
  </tfoot>
</table>

Criando células vazias

Em algumas situações, uma célula da tabela não possui valor para aquela posição. Nesses casos, é correto incluir o <td> vazio para manter a grade consistente. Omitir o <td> faria a linha ter menos colunas que as demais, quebrando o alinhamento visual.

<table>
  <thead>
    <tr>
      <th scope="col">Produto</th>
      <th scope="col">Jan</th>
      <th scope="col">Fev</th>
      <th scope="col">Mar</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Notebook</td>
      <td>R$ 3.000</td>
      <td></td>
      <td>R$ 2.800</td>
    </tr>
    <tr>
      <td>Mouse</td>
      <td></td>
      <td>R$ 50</td>
      <td>R$ 45</td>
    </tr>
    <tr>
      <td>Teclado</td>
      <td>R$ 100</td>
      <td>R$ 95</td>
      <td></td>
    </tr>
  </tbody>
</table>

Células que abrangem mais que uma linha/coluna

Os atributos colspan e rowspan permitem que uma célula ocupe mais de uma coluna ou linha, respectivamente. Isso é útil para criar cabeçalhos agrupados ou células de resumo.

• colspan="N" — a célula se expande por N colunas horizontalmente;
• rowspan="N" — a célula se expande por N linhas verticalmente.

Exemplo com colspan e rowspan (cabeçalho agrupado):

<table>
  <thead>
    <tr>
      <th scope="col" rowspan="2">Aluno</th>
      <th scope="col" colspan="2">1º Bimestre</th>
      <th scope="col" colspan="2">2º Bimestre</th>
    </tr>
    <tr>
      <th scope="col">Prova</th>
      <th scope="col">Trabalho</th>
      <th scope="col">Prova</th>
      <th scope="col">Trabalho</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ana</td>
      <td>8.5</td>
      <td>9.0</td>
      <td>7.5</td>
      <td>8.0</td>
    </tr>
    <tr>
      <td>Bruno</td>
      <td>7.0</td>
      <td>6.5</td>
      <td>8.0</td>
      <td>7.5</td>
    </tr>
  </tbody>
</table>

Exemplo com rowspan (agrupamento de linhas):

<table>
  <thead>
    <tr>
      <th scope="col">Categoria</th>
      <th scope="col">Produto</th>
      <th scope="col">Preço</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Informática</td>
      <td>Notebook</td>
      <td>R$ 3.000</td>
    </tr>
    <tr>
      <td>Mouse</td>
      <td>R$ 50</td>
    </tr>
    <tr>
      <td rowspan="2">Periféricos</td>
      <td>Teclado</td>
      <td>R$ 100</td>
    </tr>
    <tr>
      <td>Monitor</td>
      <td>R$ 500</td>
    </tr>
  </tbody>
</table>

Título da tabela

A tag <caption> adiciona um título descritivo à tabela. Ela deve ser o primeiro filho da tag <table> e é exibida por padrão centralizada acima da tabela.

Além de servir como título visível, o <caption> tem papel fundamental na acessibilidade: leitores de tela anunciam o título antes de começar a ler os dados, permitindo que o usuário entenda o propósito da tabela antes de navegar por ela.

<table>
  <caption>Notas dos Alunos — 1º Bimestre</caption>
  <thead>
    <tr>
      <th scope="col">Aluno</th>
      <th scope="col">Matemática</th>
      <th scope="col">Português</th>
      <th scope="col">Ciências</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ana</td>
      <td>9.5</td>
      <td>8.0</td>
      <td>7.5</td>
    </tr>
    <tr>
      <td>Bruno</td>
      <td>7.0</td>
      <td>6.5</td>
      <td>8.0</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">Total de alunos: 2</td>
    </tr>
  </tfoot>
</table>

Utilizando o colgroup e col

As tags <colgroup> e <col> permitem aplicar estilos ou atributos a colunas inteiras sem precisar repetir o mesmo estilo em cada <td> ou <th>.

• <colgroup> — contêiner que agrupa uma ou mais colunas;
• <col> — representa uma coluna dentro do <colgroup>. O atributo span indica quantas colunas a tag deve abranger.

Essas tags devem ser inseridas logo após a tag <table> (ou após o <caption>), antes de qualquer <thead>, <tbody> ou <tr>.

<style>
  .col-nome { background-color: #d0e8ff; }
  .col-nota { background-color: #fff8d0; }
</style>

<table>
  <caption>Notas dos Alunos</caption>
  <colgroup>
    <col class="col-nome" />
    <col class="col-nota" span="3" />
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Aluno</th>
      <th scope="col">Matemática</th>
      <th scope="col">Português</th>
      <th scope="col">Ciências</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ana</td>
      <td>9.5</td>
      <td>8.0</td>
      <td>7.5</td>
    </tr>
    <tr>
      <td>Bruno</td>
      <td>7.0</td>
      <td>6.5</td>
      <td>8.0</td>
    </tr>
  </tbody>
</table>

Atributos depreciados — use CSS no lugar

A MDN lista os seguintes atributos da tag <table> como depreciados. Eles funcionam em navegadores por compatibilidade histórica, mas não devem ser usados em código novo:

<!-- ❌ Forma antiga e depreciada -->
<table border="1" cellpadding="5" bgcolor="#f0f0f0">

<!-- ✅ Forma moderna com CSS -->
<style>
  table { border-collapse: collapse; }
  td, th { border: 1px solid #ccc; padding: 5px; background-color: #f0f0f0; }
</style>
<table>

A importância da tabela para o HTML

As tabelas são um dos recursos mais antigos e mais relevantes do HTML. Apesar de terem sido mal utilizadas no passado — especialmente para criar layouts de página inteiros antes do CSS existir —, elas continuam sendo a ferramenta semanticamente correta para apresentar dados tabulares.

Usar tabelas adequadamente traz benefícios em diversas frentes:

Semântica e SEO — Os mecanismos de busca como o Google conseguem interpretar o conteúdo de tabelas e entender a relação entre cabeçalhos e dados. Uma tabela bem marcada com <th>, <caption> e scope transmite informação estruturada para o crawler.

Acessibilidade — Leitores de tela (como NVDA, JAWS e VoiceOver) utilizam os elementos semânticos da tabela para navegar célula a célula, anunciar cabeçalhos e descrever o propósito da tabela pelo <caption>. Sem essa estrutura, a experiência para usuários com deficiência visual é confusa.

Manutenção e legibilidade — Uma tabela HTML bem estruturada com <thead>, <tbody> e <tfoot> é muito mais fácil de manter do que listas ou divs simulando colunas.

Impressão — Navegadores que suportam CSS para mídia de impressão repetem automaticamente o <thead> em cada página, facilitando a leitura de tabelas longas em papel.

Em resumo: sempre que os seus dados formam naturalmente uma grade de linhas e colunas, a tabela HTML é a ferramenta certa — e usá-la corretamente melhora ao mesmo tempo a semântica, a acessibilidade, o SEO e a manutenibilidade do seu código.

Conclusão

Neste guia você aprendeu todos os pilares das tabelas HTML:

• A tag <table> como contêiner principal;
• <tr>, <td> e <th> para montar linhas e células;
• <thead>, <tbody> e <tfoot> para estruturar semanticamente a tabela;
• Células vazias e o uso correto de colspan/rowspan;
• <caption> para adicionar um título acessível;
• <colgroup> e <col> para estilizar colunas de forma eficiente.

Dominar esses recursos permite criar tabelas que são ao mesmo tempo visualmente claras, acessíveis e otimizadas para buscadores.

Referências

• MDN Web Docs — <table>: O elemento Table
• MDN Web Docs — Noções básicas sobre tabelas HTML
• MDN Web Docs — Acessibilidade em Tabelas
• W3C WAI — Tutoriais de Tabelas Acessíveis