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.
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.
- 01Solte o arquivo e olhe a nota acima da tabela dizendo qual delimitador foi usado.
- 02Se a tabela tem uma coluna quando deveria ter seis, defina o delimitador na mão no menu.
- 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.
name,note
Bolt,"M6, 40mm"
<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