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