Guia · CSV → tabela

De CSV para uma tabela HTML, inclusive os grandes

Um CSV é um arquivo de texto com uma convenção de pontuação, e existem várias convenções. A maioria dos problemas de conversão é na verdade uma discordância sobre qual delas um arquivo está usando.

Isto cobre como o delimitador é escolhido, o que as aspas fazem, e onde os limites de tamanho ficam de verdade.

Abrir o conversor

O delimitador é detectado, não presumido

Vírgulas, ponto e vírgulas, tabulações e barras verticais: todos estão em uso. Ponto e vírgula especialmente: exporte uma planilha numa região onde a vírgula é o separador decimal e você recebe ponto e vírgulas, porque a vírgula já está ocupada.

A detecção lê as dez primeiras linhas, testa cada candidato, e escolhe o que dá uma contagem de colunas consistente. Um arquivo cujas primeiras linhas sejam incomuns — uma linha de título acima do cabeçalho, por exemplo — pode ser lido errado, então o delimitador detectado é informado na saída. Se estiver errado, troque na mão.

  1. 01Solte o arquivo e olhe a nota acima da tabela dizendo qual delimitador foi usado.
  2. 02Se a tabela tem uma coluna quando deveria ter seis, defina o delimitador na mão no menu.
  3. 03Confira se a primeira linha caiu no cabeçalho. Se o arquivo não tem cabeçalho, desligue essa opção e toda linha vira linha de corpo.

Campos entre aspas, e a vírgula dentro de uma célula

Um campo entre aspas duplas pode conter o delimitador, e uma aspa duplicada dentro dele significa uma aspa literal. Isso é RFC 4180 e está tratado direito.

Um campo entre aspas também pode conter uma quebra de linha. No HTML essas viram <br> dentro da célula, então um endereço de duas linhas continua em duas linhas em vez de arrebentar a linha.

CSV
name,note
Bolt,"M6, 40mm"
HTML
<tr>
  <td>Bolt</td>
  <td>M6, 40mm</td>
</tr>

O aviso do arquivo de uma coluna

Um CSV de uma coluna só avisa de um problema de delimitador. Vale explicar porque o arquivo geralmente está bem.

A detecção funciona achando qual caractere divide as linhas de forma consistente. Com uma coluna não há nada onde dividir, então nada parece um delimitador e ele diz isso. A saída continua correta: uma coluna, todas as linhas presentes.

Se você preferir não ver o aviso, defina o delimitador explicitamente em vez de deixar no automático.

O que «grande» quer dizer aqui

Dois tetos separados. 25 MB por arquivo, e 100.000 células — ou seja, linhas vezes colunas, então um arquivo de seis colunas chega a cerca de 16.000 linhas e um de cem colunas para por volta de mil.

O limite de células é o que você vai bater primeiro, e ele é sobre o navegador, não sobre o analisador. Cada célula vira nós do DOM na pré-visualização, e uma tabela de algumas centenas de milhares de células trava a aba. Recusar é melhor que congelar.

Para algo genuinamente maior, divida por linhas e converta cada pedaço — a linha de cabeçalho pode se repetir em cada um. Linhas vazias são descartadas automaticamente, inclusive as que são só delimitadores, que é o que normalmente é um bloco final de «,,,».

Como a tabela fica

A linha de cabeçalho vira um <thead> com células <th scope="col">; todo o resto vai no <tbody>. Linhas irregulares são completadas até a mais larga para a tabela continuar retangular, e a saída diz quantas linhas precisaram disso — normalmente sinal de que algo está quebrado antes.

Nada é convertido de tipo. 007 continua 007, e um valor como 1-2 não vira uma data. O Excel faz isso com você; isto não.

Com a opção responsiva ligada, a tabela é embrulhada num <div class="table-wrap"> que rola de lado. Uma tabela de doze colunas não cabe num celular, e deixar ela transbordar estica a página inteira em vez de só ela.

Solte o CSV ou cole as linhas direto. Os arquivos são analisados no seu navegador, então dados de clientes nunca saem da máquina.

CSV → tabela