CSV para Tabela HTML

Inserir uma tabela de dados em um post de blog, wiki interno ou boletim informativo geralmente significa lutar com o editor de tabelas do seu CMS. Cole o CSV aqui em vez disso: a primeira linha se torna células <th>, cada linha subsequente se torna <td>, e tudo isso é envolto em um elemento <table> mínimo sem estilos inline. Marcação limpa que aceita qualquer CSS que seu site forneça.

Como a conversão funciona

  1. 1

    Cole o CSV

    Quebras de linha dividem as linhas; `str_getcsv` analisa cada linha para que vírgulas entre aspas e aspas escapadas sejam tratadas corretamente.

  2. 2

    Ativar modo de cabeçalho

    Quando ativado, a primeira linha é emitida com células `<th>`; quando desativado, cada linha é um `<td>` simples.

  3. 3

    Valores são escapados em HTML

    O conversor chama o helper e() do Laravel para que `<`, `>` e `&` sejam escapados com segurança na saída.

  4. 4

    Copie a marcação

    O HTML é indentado com dois espaços para legibilidade; cole diretamente em um arquivo Blade, um post Markdown ou uma visualização de fonte WYSIWYG.

Estilo e acessibilidade para a saída

O conversor emite HTML estruturalmente simples, sem classes, sem estilos inline, sem wrappers <thead> ou <tbody>. Isso mantém a saída portátil, mas você pode querer embelezá-la.

Uma folha de estilo mínima

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 8px 12px; border-bottom: 1px solid #e5e7eb; text-align: left; }
th { background: #f9fafb; font-weight: 600; }
tr:nth-child(even) td { background: #fafafa; }

Ganhos rápidos de acessibilidade

  • Envolva a primeira linha em um <thead> se você tiver tabelas longas; leitores de tela então anunciam as colunas de cabeçalho à medida que os usuários navegam pelas linhas. O conversor não faz isso automaticamente para manter a saída mínima.
  • Adicione um elemento <caption> acima da tabela com uma descrição em linguagem simples do que os dados representam.
  • Use scope="col" em células <th> se sua linha de cabeçalho descrever colunas, scope="row" se a primeira coluna identificar linhas.

Quando HTML não é o formato certo

Se o consumidor for Markdown, use o Conversor de CSV para Markdown em vez disso. Se o consumidor for um banco de dados, o Conversor de CSV para SQL produz instruções INSERT que você pode executar diretamente. Tabelas HTML são ótimas para renderização em páginas, medianas para qualquer coisa que precise ser consultada ou reordenada.

Perguntas frequentes

Sim. Os valores são escapados com o helper e() do Laravel, então < se torna &lt; e o conteúdo fornecido pelo usuário não pode injetar tags de script ou fechar a tabela prematuramente.

Não por padrão, a saída é uma única <table> com filhos <tr> diretos. Envolva o cabeçalho <tr> em <thead> e o restante em <tbody> se seu CSS alvo exigir.

Células que contêm quebras de linha embutidas são renderizadas como estão. Se você quiser que as quebras de linha apareçam no navegador, substitua-as por <br> antes da conversão ou defina white-space: pre-wrap; no CSS <td>.

Sim. O CSV é enviado ao nosso servidor para que o conversor possa montar a tabela. Ele não é armazenado nem adicionado ao link da página.

Ferramentas relacionadas

Ferramenta disponível em outros idiomas