Conversor de CSV para Tabela HTML
Converte arquivos CSV em um trecho HTML com a marcação <table><tr><td>. Escolha o delimitador, se a primeira linha deve ser usada como cabeçalho e se as linhas devem ser envolvidas em <thead>/<tbody>. O resultado é pré-visualizado ao vivo e pode ser copiado ou baixado. A conversão ocorre inteiramente no seu navegador; nenhum dado é enviado a um servidor.
| Delimitador |
|
|---|---|
| Usar a primeira linha como cabeçalho | |
| Envolver em thead/tbody |
Pré-visualização
Código HTML
Copiado!Digite os dados CSV para ver aqui a tabela HTML gerada.
Como uma linha de CSV corresponde a uma tabela HTML
| Uma linha de CSV | name,age,city |
|---|---|
| Marcação HTML resultante | <tr><td>name</td><td>age</td><td>city</td></tr> |
Quando a primeira linha é usada como cabeçalho, ela se torna uma linha de tags <th>; cada linha seguinte se torna uma linha de tags <td>.
O que é a conversão de CSV para tabela HTML
Escrever uma tabela em HTML obriga a alinhar um <tr> por linha e um <td> por célula, o que é trabalhoso à mão. Esta ferramenta lê um CSV e o converte num fragmento HTML em forma de <table>. O resultado é pré-visualizado na hora, então você vê antes de copiar como ele se apresentará no seu destino.
Os caracteres <, > e & que haja nas células são convertidos automaticamente em entidades HTML, de modo que dados com esses símbolos não quebram a apresentação. Você pode ainda escolher se envolve a tabela em thead e tbody. Semanticamente convém incluí-los, mas em ambientes de interpretação incerta — o e-mail HTML em primeiro lugar — a forma mínima sem eles se sustenta melhor.
Como construir uma tabela HTML
- Cole o CSV Cole o CSV no campo de entrada. Se você o copiou de uma planilha, mude o separador para tabulação.
-
Decida sobre a linha de cabeçalho
Ative a opção correspondente e a primeira linha será emitida com etiquetas
<th>. - Decida sobre thead e tbody Em regra você pode deixá-los ativados. Desative-os para ambientes de apresentação incerta, como o e-mail HTML.
- Confira a pré-visualização e copie Olhe a tabela tal como é realmente representada e, se lhe serve, copie o código HTML e cole-o.
Dicas para aproveitar melhor
- Ao colar em um e-mail HTML ou em um CMS antigo sem suporte a Markdown, a saída mínima sem thead/tbody costuma ser mais fácil de usar.
- Qualquer
<,>ou&dentro de uma célula é automaticamente escapado para entidades HTML, então colar o código gerado não vai quebrar o layout. - A pré-visualização renderiza a tabela convertida exatamente como um navegador faria, permitindo conferir a aparência antes de copiar o código.
- Combine com as ferramentas irmãs CSV para Markdown e CSV para JSON para converter um mesmo CSV no formato que você precisar.
Quando converter CSV para HTML é útil
Pôr uma tabela num blog ou CMS
Mesmo num CMS sem Markdown, colar no modo de edição HTML permite publicar uma tabela.
Inserir uma tabela num e-mail HTML
O e-mail não interpreta Markdown: uma tabela exige HTML. A forma mínima, retirados thead e tbody, se sustenta melhor.
Fabricar um protótipo antes da implementação
Na fase de desenho das telas, você transforma no ato em HTML uma tabela próxima dos dados reais. Serve também para conferir a aplicação dos estilos.
Publicar sem risco dados com símbolos
Os valores que contêm sinais de maior/menor ou e-comerciais são escapados automaticamente, então a diagramação não quebra no destino.
O vocabulário das tabelas HTML
- O elemento table
- A etiqueta HTML que representa uma tabela. Para o seu uso próprio — expressar dados reais com linhas e colunas — continua sendo hoje a etiqueta adequada.
- th e td
<th>é uma célula de cabeçalho e<td>uma célula de dados. Distingui-las permite aos leitores de tela transmitir a sua correspondência.- thead e tbody
- Etiquetas que separam semanticamente a parte do cabeçalho da do corpo. Influem também na repetição do cabeçalho ao imprimir uma tabela longa.
- Entidade HTML
- Uma escrita que apresenta os símbolos sem risco.
<é assim substituído por<. - Diagramação com tabelas
- A antiga técnica de construir toda a estrutura de colunas de uma página com marcação de tabela. Hoje é tida por um antipadrão declarado.
Perguntas Frequentes
<table> padrão, então pode ser colado diretamente no modo de edição HTML do WordPress ou no corpo de um e-mail HTML.
Curiosidade — Por que a tag <table> se recusa a desaparecer
No final dos anos 1990, no início da Web, o "layout em tabelas" — montar toda a estrutura de uma página com tags <table> — era a norma. O CSS da época tinha pouquíssimo poder de layout, e as tabelas eram praticamente o único recurso viável para organizar conteúdo em múltiplas colunas, então o código HTML daquela era estava repleto de elementos <table> que nada tinham a ver com dados tabulares.
Agora que o CSS amadureceu e Flexbox e Grid são amplamente usados, usar tabelas para layout é considerado um antipadrão conhecido. Mas para seu propósito original — representar dados reais organizados em linhas e colunas — <table> continua sendo a escolha mais adequada e acessível, já que leitores de tela conseguem anunciar a relação entre as células <th> e <td>.
A necessidade de colar conteúdo de CSV em um post de blog ou em um boletim por e-mail continua comum, já que e-mails HTML não conseguem renderizar Markdown e alguns CMSs não têm plugin de Markdown. Uma ferramenta que converte o resultado de uma planilha em uma tabela HTML com um clique atende a essa necessidade prática simples, porém persistente.