Tag HTML <table>

A tag <table> define uma tabela HTML. É um contêiner para os elementos que constroem as linhas, células e cabeçalhos da tabela, exibindo dados tabulares — informações que possuem uma relação significativa entre linhas e colunas.

Esta página explica como estruturar uma tabela corretamente, como torná-la acessível para leitores de tela e quais propriedades CSS substituem os antigos atributos de apresentação que não são mais válidos em HTML5.

Estrutura da tabela

Uma tabela é construída a partir de alguns elementos que cooperam entre si:

<tr> define uma linha de tabela.
<th> define uma célula de cabeçalho — seu texto é negrito e centralizado por padrão.
<td> define uma célula de dados.
<caption> fornece um título para a tabela.
<thead>, <tbody> e <tfoot> agrupam as linhas de cabeçalho, corpo e rodapé.
<colgroup> permite aplicar estilos a colunas inteiras.

Agrupar linhas com <thead> e <tbody> vai além de uma marcação organizada: informa ao navegador (e às tecnologias assistivas) qual linha é o cabeçalho. Isso também permite que o corpo role enquanto o cabeçalho permanece fixo, e possibilita estilizar linhas de cabeçalho e corpo separadamente.

Dica

Use <th> para qualquer célula que rotule uma linha ou coluna. Seu principal valor é a acessibilidade: leitores de tela anunciam o cabeçalho ao ler uma célula de dados, para que um usuário que não pode ver a grade ainda saiba o que cada valor significa. Como bônus, células de cabeçalho são negrito e centralizadas por padrão e ajudam os mecanismos de busca a entender a estrutura da tabela.

Sintaxe

A tag <table> vem em pares. O conteúdo é escrito entre as tags de abertura (<table>) e fechamento (</table>).

Exemplo da tag HTML `<table>`:

Tag HTML <table>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 80%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>Upcoming release dates</caption>
      <thead>
        <tr>
          <th scope="col">Month</th>
          <th scope="col">Date</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">June</th>
          <td>10.06.2018</td>
        </tr>
        <tr>
          <th scope="row">July</th>
          <td>15.07.2018</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Tornando tabelas acessíveis

Uma grade visualmente formatada é fácil de examinar com os olhos, mas um leitor de tela anuncia as células uma de cada vez. Esses recursos fornecem o contexto necessário:

<caption> é o nome acessível da tabela. Coloque-o como primeiro filho de <table>. Usuários de leitores de tela o ouvem quando chegam à tabela, para saberem sobre o que são os dados antes de explorá-los.
<th scope="col"> marca uma célula como cabeçalho de toda a sua coluna; <th scope="row"> marca-a como cabeçalho da sua linha. Com esses atributos definidos, um leitor de tela pode anunciar "Mês: Junho" em vez de apenas "Junho", associando cada valor ao seu rótulo.

Para tabelas complexas — onde uma célula se relaciona com cabeçalhos que não estão simplesmente no topo de sua coluna ou no início de sua linha (por exemplo, cabeçalhos que abrangem múltiplas colunas) — scope não é suficiente. Use o padrão headers/id: atribua um id único a cada <th> e liste os ids relevantes no atributo headers de cada <td>.

<table>
  <caption>Quarterly revenue by region</caption>
  <thead>
    <tr>
      <th id="region">Region</th>
      <th id="q1">Q1</th>
      <th id="q2">Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="europe" headers="region">Europe</th>
      <td headers="europe q1">120</td>
      <td headers="europe q2">150</td>
    </tr>
  </tbody>
</table>

Atributos

Perigo

Os atributos da tag <table> não são suportados em HTML5. Para estilizar tabelas, use as propriedades CSS listadas abaixo.

Atributo	Valor	Descrição	Propriedade CSS
align	left center right	Define como a tabela deve ser alinhada em relação ao texto ao redor. Não suportado em HTML5.	margin
bgcolor	rgb(x,x,x) #xxxxxx colorname	Define a cor de fundo de uma tabela. Não suportado em HTML5.	background-color
border	1 0	Define o tamanho da borda ao redor da tabela. Não suportado em HTML5.	border
cellpadding	pixels	Define o espaço entre a parede da célula e o conteúdo da célula. Não suportado em HTML5.	padding
cellspacing	pixels	Define o espaço entre as células. Não suportado em HTML5.	border-spacing
frame	void above below hsides lhs rhs vsides box border	Define qual lado da borda ao redor da tabela deve ser exibido. Não suportado em HTML5.	border-style border-width
rules	none groups rows cols all	Define quais partes das bordas internas devem ser visíveis. Não suportado em HTML5.	border (Use esta propriedade correspondentemente com as tags HTML thead, tbody, tfoot, col ou colgroup).
width	pixels	Define a largura de uma tabela. Não suportado em HTML5.	width

A tag <table> também suporta os Atributos Globais e os Atributos de Evento.

Substituindo os atributos antigos por CSS

Os atributos de apresentação acima (border, cellpadding, cellspacing, align, bgcolor e outros) são obsoletos em HTML5. Estilize a tabela com CSS. Este exemplo reproduz uma tabela com bordas, preenchimento e centralizada sem nenhum atributo obsoleto:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        /* width="80%" + align="center" */
        width: 80%;
        margin: 30px auto;
        /* cellspacing="0" — collapse the double borders */
        border-collapse: collapse;
        /* bgcolor on the table */
        background-color: #f9f9f9;
      }
      th,
      td {
        /* border="1" */
        border: 1px solid #666;
        /* cellpadding="10" */
        padding: 10px;
        /* align="left" inside cells */
        text-align: left;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>Styled with CSS, not attributes</caption>
      <thead>
        <tr>
          <th scope="col">Month</th>
          <th scope="col">Date</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">June</th>
          <td>10.06.2018</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Um mapeamento rápido dos atributos mais comuns para seus equivalentes em CSS:

border → border
cellpadding → padding em <th>/<td>
cellspacing → border-spacing, ou border-collapse: collapse para remover espaçamentos
align → margin (tabela) ou text-align (células)
bgcolor → background-color
width → width

Não use tabelas para layout

Uma <table> deve conter apenas dados tabulares — conteúdo com relações reais de linha/coluna. Não use-a para posicionar regiões da página como barras laterais, navegação ou colunas de texto. Tabelas de layout confundem leitores de tela (que tentam anunciar relações de cabeçalho/célula que não existem) e são rígidas e difíceis de tornar responsivas.

Para layout de página, use CSS moderno:

CSS Grid para layouts bidimensionais (linhas e colunas) — a substituição natural para estruturas de página semelhantes a grades.
Flexbox para layouts unidimensionais, como uma fila de cards ou uma barra de navegação.

Consulte os modelos de layout HTML para estruturas prontas.

Prática

Qual afirmação sobre os elementos de tabela HTML está correta?

O elemento td define uma célula de dados, o elemento th define uma célula de cabeçalho e tr define uma linha.O elemento th é usado para criar uma nota de rodapé na parte inferior da tabela.O elemento td é a única forma de inserir imagens em uma página web.O elemento caption deve ser colocado após a tag de fechamento da tabela.