English 中文 العربية 日本語 Português

<table>: Elemento TABLE

Última atualização: 2026-10-13

<table>Elemento TABLE

O elemento <table> exibe dados em forma de tabela. Consiste em linhas (<tr>) e células (<td>/<th>), frequentemente com <thead>/<tbody>/<caption>.

CategoriaTabelas
Modelo de ConteúdoOpcional <caption>, zero+ <colgroup>, zero+ <thead>/<tbody>/<tfoot>, <tr>
Pais PermitidosQualquer elemento que aceite conteúdo de fluxo
Tag de FechamentoSim — requer fechamento </table> tag
StatusPadrão

📝 Sintaxe

<table>
  <tr>
    <th>Cabeçalho</th>
    <td>Dados</td>
  </tr>
</table>
Ver todos os atributos globais → Ver todos os atributos de evento →

▶ Exemplo

Edite o código abaixo e veja o resultado em tempo real no playground:

▶ Experimente

🌐 Suporte de Navegadores

Navegador ChromeChrome EdgeEdge FirefoxFirefox SafariSafari OperaOpera
<table> ✓ v1 ✓ v12 ✓ v1 ✓ v1 ✓ v1
Suportado em todos os navegadores principais
Aviso： Não use tabelas para layout de página (nav, sidebar) — isso é trabalho do CSS. Tabelas são apenas para dados tabulares.

❓ Perguntas Frequentes

Qtable ainda serve para layout de página?
ANão, é uma prática abandonada há mais de uma década — layout em tabela prejudica acessibilidade, adaptação mobile e semântica. Tabelas servem apenas para dados bidimensionais de verdade (boletim de notas, lista de preços, quadro comparativo). O layout fica com Flexbox e Grid.
QAs linhas de table precisam ficar dentro de tbody?
ANão é obrigatório — omitindo o tbody, o parser do navegador embrulha as <tr> num tbody implícito (ele sempre existe no DOM). Vantagem de escrever tbody explicitamente: dá para estilizá-lo isoladamente e usar recursos avançados com thead/tfoot, como cabeçalho congelado.
QComo fazer tabelas responsivas?
ATabelas sofrem em telas estreitas por natureza; soluções comuns: contêiner externo com overflow-x: auto e rolagem horizontal (o mais simples); transformar linhas em cartões em telas estreitas (display: block + data-label); congelar a primeira coluna. Acima de 5 colunas, prefira a rolagem horizontal.
<tr> <td> <th> <thead> <tbody> <caption>
<table> — tables tutorial

📚 Tutoriais Relacionados

HTML Tables
Tutorial de Tabelas HTML
Aprenda a estrutura completa de tabelas
Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%