ZenovayTools

Gerador de Tabela HTML

Gere código de tabela HTML a partir de um editor visual. Adicione linhas e colunas, defina cabeçalhos e opções de estilo. Exporte HTML limpo com estilos inline ou classes CSS.

Rows:3
Columns:4

Border style

Edit Table

Como Usar Gerador de Tabela HTML

  1. 1Defina o número de linhas e colunas.
  2. 2Clique nas células para editar seu conteúdo.
  3. 3Alterne a linha de cabeçalho e escolha o estilo de borda.
  4. 4Copie o código de tabela HTML gerado.
ZenovayAnalytics

Saiba o que seus visitantes realmente fazem.

  • Acompanhamento de visitantes em tempo real
  • Privacidade em primeiro lugar, sem banner de cookies
  • Configurado em dois minutos
Conheça o Zenovay

Ferramentas Relacionadas

Gerador de Gradientes CSS
Crie belos gradientes CSS com um editor visual. Gradientes lineares, radiais e cônicos.
Gerador de CSS Box Shadow
Projete sombras CSS box-shadow com controles visuais. Ajuste o deslocamento, desfoque, espalhamento e cor.
Gerador de CSS Border Radius
Crie valores personalizados de border radius com controles visuais. Vincule ou desvinque os cantos para ajuste rápido.
Área de Testes CSS Flexbox
Aprenda e gere layouts CSS Flexbox visualmente. Ajuste direção, alinhamento, quebra de linha e espaçamento em tempo real.

Perguntas Frequentes

Qual é a estrutura básica de uma tabela HTML?▾
<table>: elemento pai. <thead>: seção de cabeçalho da tabela (opcional, mas recomendado). <tbody>: corpo da tabela. <tfoot>: rodapé da tabela (opcional). <tr>: linha da tabela (dentro de thead, tbody ou tfoot). <th>: célula de cabeçalho — em negrito e centralizado por padrão, com atributo scope. <td>: célula de dados. Exemplo: <table><thead><tr><th>Nome</th><th>Idade</th></tr></thead><tbody><tr><td>Alice</td><td>30</td></tr></tbody></table>.
Como adiciono bordas a tabelas HTML?▾
O atributo HTML border está obsoleto. Use CSS: table { border-collapse: collapse; } td, th { border: 1px solid #ddd; padding: 8px; }. border-collapse: collapse faz bordas adjacentes se fundirem; border-collapse: separate (padrão) mantém bordas separadas. Para linhas listradas: tr:nth-child(even) { background: #f9f9f9; }. Para hover: tr:hover { background: #f0f0f0; }.
O que são colspan e rowspan?▾
colspan: quantas colunas uma célula ocupa. rowspan: quantas linhas uma célula ocupa. Exemplo: <td colspan="2">ocupa 2 colunas</td>. Usado para células mescladas, como um cabeçalho cobrindo múltiplas colunas ou uma célula cobrindo múltiplas linhas. Ao usar colspan/rowspan, as células ocupadas são removidas do HTML — a tabela ainda renderiza corretamente. A maioria dos conversores de planilha para HTML lida com isso automaticamente.
Como tornar tabelas HTML acessíveis?▾
Adicione scope às células de cabeçalho: <th scope="col">Coluna</th> ou <th scope="row">Cabeçalho de linha</th>. Use <caption> para o título da tabela. Adicione atributos id/headers para tabelas complexas: <th id="h1">Nome</th>, <td headers="h1">Alice</td>. Use role="table" para elementos HTML não-tabela usados como tabelas. Evite usar tabelas para layout — use CSS Grid ou Flexbox. Leitores de tela anunciam a contagem de colunas/linhas e navegam por célula com as teclas de seta.
Como tornar tabelas HTML responsivas?▾
Envolva em um contêiner rolável: <div style="overflow-x:auto"><table>...</table></div>. Isso permite rolagem horizontal em telas pequenas. Técnicas mais avançadas: oculte colunas menos importantes em mobile com CSS (display:none em um breakpoint), use atributos data-label + CSS para mostrar rótulos quando as colunas colapsam, ou converta para cards em mobile: table { width:100% } td { display:block; } td::before { content:attr(data-label); }. Bibliotecas como DataTables lidam com comportamento responsivo automaticamente.