Voltar ao início Desenvolvedor Gerador de tabelas HTML

Gerador de tabelas HTML

Converta CSV/TSV em tabelas HTML

Como usar Gerador de tabelas HTML

Converta CSV/TSV em tabelas HTML Ferramenta gratuita online, sem registo, sem anúncios intrusivos. Use agora.

Quando você precisa de um gerador de tabelas HTML?

Tabelas HTML exibem dados tabulares — linhas e colunas com cabeçalhos. Escrever HTML de tabela manualmente é verboso e propenso a erros, especialmente para tabelas com muitas colunas. Um gerador converte dados estruturados em marcação de tabela válida e formatada instantaneamente.

Acessibilidade em tabelas HTML: Tabelas HTML bem formadas incluem cabeçalhos <th> com atributos scope (scope="col" ou scope="row"), um elemento <caption> descritivo e usam seções <thead>/<tbody>/<tfoot>. Leitores de tela dependem dessa estrutura para comunicar os dados tabulares de forma significativa a usuários com deficiência visual.

Frequently Asked Questions

Quando devo usar uma tabela em vez de CSS grid/flexbox?

Use tabelas para dados genuinamente tabulares — dados com linhas e colunas significativas, onde o significado de cada célula depende de seus cabeçalhos de linha e coluna. Use CSS grid e flexbox para layout de página — mesmo que o resultado visual pareça uma grade, layouts não tabulares não devem usar elementos <table> por razões semânticas e de acessibilidade.

Qual é a diferença entre <th> e <td>?

<th> é uma célula de cabeçalho de tabela — em negrito e centralizada por padrão, e semanticamente marca a célula como cabeçalho de sua linha ou coluna. Leitores de tela usam <th> para anunciar o contexto da coluna ou linha ao navegar pelos dados. <td> é uma célula de dados sem significado semântico especial. Sempre use <th> para cabeçalhos de coluna e linha.

Como tornar uma tabela responsiva no mobile?

Tabelas HTML puras não respondem a telas estreitas — elas transbordam ou comprimem o conteúdo. Soluções comuns: adicione overflow-x:auto a um div container para habilitar scroll horizontal. Ou use CSS para empilhar células verticalmente no mobile, usando atributos data-label para mostrar os cabeçalhos de coluna junto com cada valor — uma abordagem acessível para tabelas de dados complexas.

O que é a propriedade CSS border-collapse?

Por padrão, células de tabela adjacentes têm bordas separadas, criando linhas duplas entre as células. border-collapse:collapse mescla bordas adjacentes em uma única linha — a aparência padrão para a maioria das tabelas de dados. border-collapse:separate mantém as bordas distintas e permite border-spacing entre células.

Posso gerar tabelas com células mescladas (colspan/rowspan)?

Este gerador cria tabelas regulares a partir de dados CSV — todas as células têm o mesmo tamanho. Para tabelas com células mescladas (colspan, rowspan), é necessária edição manual do HTML. Use esta ferramenta para a tabela base e adicione os atributos de mesclagem em um editor de código.

Tabela HTML vs tabela Markdown vs planilha eletrônica

Uma tabela HTML oferece controle total de estilo e é renderizada pelos navegadores e pela maioria dos clientes de e-mail. Uma tabela Markdown (separada por pipes) é renderizada pelo GitHub, GitLab e a maioria das plataformas de documentação — mais simples de escrever, mas com estilo limitado. Uma planilha eletrônica (Excel, Google Sheets) é melhor para análise de dados com fórmulas, classificação e filtragem interativa. Escolha HTML para incorporação web, Markdown para documentação técnica e planilhas para análise de dados.

☕ Buy me a coffee