<table>: O elemento Table

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

O elemento <table> HTML representa dados tabulares — isto é, informações apresentadas em uma tabela bidimensional composta por linhas e colunas de células contendo dados .

Experimente

Contexto de uso

Categoria de conteúdo Fluxo de conteúdo
Conteúdo permitido Nesta ordem:
  1. um elemento <caption> opcional,
  2. zero ou mais <colgroup> elementos,
  3. um elemento <thead> opcional,
  4. uma das duas alternativas:
    • zero ou mais elementos <tbody>
    • um ou mais elementos <tr>
  5. um elemento <tfoot> opcional
Omissão de tag None, both the starting and ending tag are mandatory.
Elementos pais permitidos Qualquer elemento que aceite fluxo de conteúdo
Função ARIA implícita table
Permitted ARIA roles Any
Interface DOM HTMLTableElement

Atributos

Este elemento inclui os atributos globais.

Atributos depreciados

align

Este atributo enumerado indica como a tabela deve ser alinhada dentro do documento que a contém. Pode ter os seguintes valores:

  • left: a tabela é exibida no lado esquerdo do documento;
  • center: a tabela é exibida no centro do documento;
  • right: a tabela é exibida no lado direito do documento.

Defina margin-left e margin-right como auto ou margin como 0 auto para obter um efeito que é semelhante ao atributo align.

bgcolor

A cor de fundo da tabela. É um código RGB hexadecimal de 6 dígitos, prefixado por um '#'. Uma das [palavras-chave de cor] predefinidas (/pt-BR/docs/Web/CSS/named-color) também pode ser usada.

Para obter um efeito semelhante, use a propriedade CSS background-color.

border

Este atributo inteiro define, em pixels, o tamanho do quadro ao redor da tabela. Se definido como 0, o atributo frame é definido como void.

Para obter um efeito semelhante, use a propriedade abreviada CSS border.

cellpadding

Este atributo define o espaço entre o conteúdo de uma célula e sua borda, exibida ou não. Se o comprimento do preenchimento da célula for definido em pixels, esse espaço de tamanho de pixel será aplicado a todos os quatro lados do conteúdo da célula. Se o comprimento for definido usando um valor percentual, o conteúdo será centralizado e o espaço vertical total (superior e inferior) representará este valor. O mesmo vale para o espaço horizontal total (esquerda e direita).

Para obter um efeito semelhante, aplique a propriedade border-collapse ao elemento <table>, com seu valor definido para recolher, e a propriedade padding aos elementos <td>.

cellspacing

Este atributo define o tamanho do espaço entre duas células em um valor percentual ou pixels. O atributo é aplicado horizontal e verticalmente, ao espaço entre o topo da tabela e as células da primeira linha, a esquerda da tabela e a primeira coluna, a direita da tabela e a última coluna e a parte inferior da tabela e a última linha.

Para obter um efeito semelhante, aplique a propriedade border-spacing ao elemento <table>. border-spacing não tem nenhum efeito se border-collapse estiver definido para recolher.

frame

Este atributo enumerado define qual lado do quadro ao redor da tabela deve ser exibido.

Para obter um efeito semelhante, use as propriedades border-style e border-width.

rules

Este atributo enumerado define onde as rules, ou seja, as linhas, devem aparecer em uma tabela. Pode ter os seguintes valores:

  • none, que indica que nenhuma regra será exibida; é o valor padrão;
  • groups, que fará com que as regras sejam exibidas entre os grupos de linhas (definidas por <thead>, <tbody> e <tfoot> elementos) e entre grupos de colunas (definidos apenas pelos elementos <col> e <colgroup>);
  • rows, que fará com que as regras sejam exibidas entre as linhas;
  • cols, que fará com que as regras sejam exibidas entre as colunas;
  • all, que fará com que as regras sejam exibidas entre linhas e colunas.

Para obter um efeito semelhante, aplique a propriedade border ao apropriado <thead>, <tbody>, tfoot , <col>, ou <colgroup> elementos.

summary

Este atributo define um texto alternativo que resume o conteúdo da tabela. Use o elemento <caption> em vez disso.

width

Este atributo define a largura da tabela. Em vez disso, use a propriedade CSS width.

Exemplos

Table simples

html
<table>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

Resultado

Outros exemplos simples

html
<p>Tabela simples com cabeçalho</p>
<table>
  <tr>
    <th>First name</th>
    <th>Last name</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

<p>Tabela com thead, tfoot, e tbody</p>
<table>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
</table>

<p>Tabela com colgroup</p>
<table>
  <colgroup span="4"></colgroup>
  <tr>
    <th>Countries</th>
    <th>Capitals</th>
    <th>Population</th>
    <th>Language</th>
  </tr>
  <tr>
    <td>USA</td>
    <td>Washington, D.C.</td>
    <td>309 million</td>
    <td>English</td>
  </tr>
  <tr>
    <td>Sweden</td>
    <td>Stockholm</td>
    <td>9 million</td>
    <td>Swedish</td>
  </tr>
</table>

<p>Tabela com colgroup e col</p>
<table>
  <colgroup>
    <col style="background-color: #0f0" />
    <col span="2" />
  </colgroup>
  <tr>
    <th>Lime</th>
    <th>Lemon</th>
    <th>Orange</th>
  </tr>
  <tr>
    <td>Green</td>
    <td>Yellow</td>
    <td>Orange</td>
  </tr>
</table>

<p>Tabela simples com caption</p>
<table>
  <caption>
    Awesome caption
  </caption>
  <tr>
    <td>Awesome data</td>
  </tr>
</table>

Resultado

Ordenação de tabela

Ordenando as linhas da tabela

Não há métodos nativos para classificar as linhas (elementos <tr>) de uma tabela HTML. Mas usando Array.prototype.slice(), Array.prototype.sort(), Node.removeChild() e Node.appendChild(), você pode implementar sua própria função sort() para classificar uma HTMLCollection de elementos <tr>.

No exemplo abaixo, você pode ver tal exemplo. Estamos anexando-o ao elemento <tbody> para que ele classifique as células da tabela em ordem crescente de valor e atualize a exibição para se adequar.

HTML
html
<table>
  <tbody>
    <tr>
      <td>3</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
    </tr>
  </tbody>
</table>
JavaScript
js
HTMLTableSectionElement.prototype.sort = function (cb) {
  Array.from(this.rows)
    .sort(cb)
    .forEach((e) => this.appendChild(this.removeChild(e)));
};

document
  .querySelector("table")
  .tBodies[0].sort((a, b) => a.textContent.localeCompare(b.textContent));
Resultado

Ordenando as linhas com um clique no elemento th

O exemplo a seguir adiciona um manipulador de eventos a cada elemento <th> de cada <table> no document; ele ordena todas as linhas do <tbody>, baseando a ordenação nas células td contidas nas linhas.

Nota: Esta solução assume que os elementos <td> são preenchidos por texto bruto sem elementos descendentes.

HTML
html
<table>
  <thead>
    <tr>
      <th>Números</th>
      <th>Letras</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3</td>
      <td>A</td>
    </tr>
    <tr>
      <td>2</td>
      <td>B</td>
    </tr>
    <tr>
      <td>1</td>
      <td>C</td>
    </tr>
  </tbody>
</table>
JavaScript
js
const allTables = document.querySelectorAll("table");

for (const table of allTables) {
  const tBody = table.tBodies[0];
  const rows = Array.from(tBody.rows);
  const headerCells = table.tHead.rows[0].cells;

  for (const th of headerCells) {
    const cellIndex = th.cellIndex;

    th.addEventListener("click", () => {
      rows.sort((tr1, tr2) => {
        const tr1Text = tr1.cells[cellIndex].textContent;
        const tr2Text = tr2.cells[cellIndex].textContent;
        return tr1Text.localeCompare(tr2Text);
      });

      tBody.append(...rows);
    });
  }
}
Resultado

Exibindo tabelas grandes em espaços pequenos

Um problema comum com tabelas na web é que elas não funcionam muito bem nativamente em telas pequenas quando a quantidade de conteúdo é grande, e a maneira de torná-las roláveis não é óbvia, especialmente quando a marcação pode vir de um CMS e não pode ser modificado para ter um wrapper.

Este exemplo fornece uma maneira de exibir tabelas em espaços pequenos. Ocultamos o conteúdo HTML porque ele é muito grande e não há nada de extraordinário nele. O CSS é mais útil para inspecionar neste exemplo.

Ao observar esses estilos, você notará que a propriedade display da tabela foi definida como block. Embora isso permita a rolagem, a tabela perde um pouco de sua integridade e as células da tabela tentam se tornar o menor possível. Para atenuar esse problema, definimos white-space como nowrap no <tbody>. No entanto, não fazemos isso para o <thead> para evitar que títulos longos forcem as colunas a serem mais largas do que o necessário para exibir os dados.

Para manter os cabeçalhos da tabela na página durante a rolagem para baixo, definimos position para fixar nos elementos <th>. Observe que não definimos border-collapse como collapse, pois se o fizermos, o cabeçalho não pode ser separado corretamente do restante da tabela.

css
table,
th,
td {
  border: 1px solid;
}

table {
  width: 100%;
  max-width: 400px;
  height: 240px;
  margin: 0 auto;
  display: block;
  overflow-x: auto;
  border-spacing: 0;
}

tbody {
  white-space: nowrap;
}

th,
td {
  padding: 5px 10px;
  border-top-width: 0;
  border-left-width: 0;
}

th {
  position: sticky;
  top: 0;
  background: #fff;
  vertical-align: bottom;
}

th:last-child,
td:last-child {
  border-right-width: 0;
}

tr:last-child td {
  border-bottom-width: 0;
}

Resultado

Preocupações com acessibilidade

Legendas

Ao fornecer um elemento <caption> cujo valor descreve de forma clara e concisa o propósito da tabela, ele ajuda as pessoas a decidirem se precisam ler o restante do conteúdo da tabela ou ignorá-lo.

Isso ajuda as pessoas a navegar com o auxílio de tecnologia assistiva, como um leitor de tela, pessoas com problemas de visão subnormal e pessoas com problemas cognitivos.

Escopo de linhas e colunas

O atributo scope em elementos de cabeçalho é redundante em contextos simples, porque o escopo é inferido. No entanto, algumas tecnologias assistivas podem não obter inferências corretas, portanto, especificar o escopo do cabeçalho pode melhorar a experiência do usuário. Em tabelas complexas, o escopo pode ser especificado para fornecer as informações necessárias sobre as células relacionadas a um cabeçalho.

Examples

html
<table>
  <caption>
    Nomes das cores e valores
  </caption>
  <tbody>
    <tr>
      <th scope="col">Nome</th>
      <th scope="col">HEX</th>
      <th scope="col">HSLa</th>
      <th scope="col">RGBa</th>
    </tr>
    <tr>
      <th scope="row">Teal</th>
      <td><code>#51F6F6</code></td>
      <td><code>hsl(180 90% 64% / 1)</code></td>
      <td><code>rgb(81 246 246 / 1)</code></td>
    </tr>
    <tr>
      <th scope="row">Goldenrod</th>
      <td><code>#F6BC57</code></td>
      <td><code>hsl(38 90% 65% / 1)</code></td>
      <td><code>rgba(246 188 87 / 1)</code></td>
    </tr>
  </tbody>
</table>
Resultado

Fornecer uma declaração de scope="col" em um elemento <th> ajudará a descrever que a célula está no topo de uma coluna. Fornecer uma declaração de scope="row" em um elemento <th> ajudará a descrever que a célula é a primeira em uma linha.

Tabelas complicadas

A tecnologia assistiva, como leitores de tela, pode ter dificuldade em analisar tabelas que são tão complexas que as células de cabeçalho não podem ser associadas de maneira estritamente horizontal ou vertical. Isso é normalmente indicado pela presença de colspan e [rowspan](/pt-BR/docs/Web/HTML/ Element/td#rowspan).

Idealmente, considere maneiras alternativas de apresentar o conteúdo da tabela, incluindo dividi-la em uma coleção de tabelas relacionadas menores que não precisam depender do uso dos atributos colspan e rowspan. Além de ajudar as pessoas que usam tecnologia assistiva a entender o conteúdo da tabela, isso também pode beneficiar pessoas com problemas cognitivos que podem ter dificuldade em entender as associações que o layout da tabela está descrevendo.

Se a tabela não puder ser separada, use uma combinação de id e [headers](/pt-BR/docs/Web/ HTML/Element/td#headers) para associar programaticamente cada célula da tabela aos cabeçalhos aos quais a célula está associada.

Especificações

Specification
HTML Standard
# the-table-element

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também