Conversor de tabela HTML para JSON/CSV

Para converter uma tabela HTML em JSON, as células da linha de cabeçalho tornam-se as chaves do objeto e cada <tr> seguinte torna-se um objeto — a conversão inversa constrói uma tabela <thead>/<tbody> a partir dessa mesma estrutura. Cole código de uma tabela HTML e obtenha um array de objetos JSON ou um ficheiro CSV, ou cole JSON/CSV e obtenha código de tabela HTML limpo — a conversão é feita inteiramente no seu navegador com o DOMParser nativo, sem que nenhum dado seja enviado para lado nenhum.

O que é esta ferramenta?

As páginas web muitas vezes apresentam dados dentro de um elemento <table> HTML — uma página de preços, uma página de estatísticas, uma listagem extraída de outro site — mas esse código não é diretamente utilizável em programação ou numa folha de cálculo. Esta ferramenta analisa o código <table> colado, lê a linha de cabeçalho (a partir de <thead>/<th>, ou a primeira <tr> se não houver <thead>), associa as células de cada linha seguinte a esses cabeçalhos e gera um array de objetos JSON ou um ficheiro CSV.

Também funciona ao contrário: cole um array de objetos JSON ou texto CSV, e a ferramenta gera uma tabela HTML devidamente estruturada, com um <thead> para os cabeçalhos de coluna e um <tbody> para as linhas de dados, pronta a colar numa página web ou CMS.

Tudo funciona com o DOMParser nativo do navegador — nenhum HTML é enviado para um servidor, o que torna seguro usá-lo com conteúdo colado que inclua dados internos ou sensíveis.

Fonte: a estrutura da tabela segue a definição do elemento table do WHATWG HTML Living Standard.

Por que usar?

Conversão nos dois sentidos — tabela HTML para JSON, tabela HTML para CSV, e JSON/CSV de volta para código de tabela HTML limpo.
Deteção automática de cabeçalhos — funciona com <thead>/<th> ou com uma simples primeira <tr> usada como linha de cabeçalho.
Sem ter de colar primeiro numa folha de cálculo — vai diretamente do código de tabela para dados estruturados.
Gera saída HTML devidamente escapada, para que caracteres especiais como < e & nos seus dados não quebrem a tabela.
100% do lado do cliente — o HTML que cola (que pode vir de uma página interna ou painel de administração) nunca sai do seu navegador.

Como usar

Para converter uma tabela HTML: cole o código <table>...</table> na primeira caixa e clique em "Converter para JSON" ou "Converter para CSV".
Reveja o resultado, copie-o ou clique na ligação de descarga para guardar o ficheiro.
Para gerar uma tabela HTML: cole um array JSON ou texto CSV na segunda caixa.
Clique em "Converter para tabela HTML" e copie o código gerado para a sua página ou CMS.

Exemplo

Entrada

<table><tr><th>name</th><th>age</th></tr><tr><td>Alice</td><td>30</td></tr></table>

Resultado

[{"name":"Alice","age":"30"}]

As células da primeira linha tornam-se as chaves do objeto; cada linha seguinte torna-se um elemento do array com os valores lidos como texto.

Dicas práticas

Extrair dados de uma tabela numa página web: veja o código-fonte da página ou inspecione o elemento, copie o código <table>...</table> e cole-o aqui em vez de reescrever os dados manualmente.
Publicar uma resposta de API como uma tabela legível num site ou CMS: cole o array JSON na segunda caixa e copie o HTML gerado diretamente para o bloco de texto rico ou HTML da sua página.
Se uma tabela usar <div> ou grelha CSS em vez de verdadeiras tags <table>, esta ferramenta não a conseguirá analisar — a página de origem precisa de usar tags de tabela HTML reais.

Por que a deteção do cabeçalho importa

Uma tabela sem uma linha de cabeçalho clara é ambígua — qualquer ferramenta seguinte precisa de saber qual linha define os nomes de coluna antes de poder transformar o resto em registos estruturados. Esta ferramenta resolve essa ambiguidade da mesma forma que os navegadores e a maioria dos scrapers: procura primeiro uma secção <thead> explícita, e só recorre a tratar a primeira linha visível como cabeçalho quando não existe <thead>. Isso mantém a conversão previsível mesmo com código de tabela escrito à mão ou extraído de outro site que salte as tags mais semânticas.

Perguntas frequentes

Funciona com tabelas que não usam <thead>?

Sim. Se não houver <thead>, a ferramenta trata a primeira <tr> da tabela como linha de cabeçalho.

O que acontece se uma linha tiver menos células do que a linha de cabeçalho?

As células em falta nessa linha ficam como strings vazias no JSON ou em branco no CSV, mantendo a estrutura da linha em vez de causar um erro.

As tags aninhadas dentro de uma célula, como <b> ou <a>, são preservadas?

Não — só é extraído o conteúdo de texto visível de cada célula. A formatação em linha, as ligações e outras marcações aninhadas dentro de uma célula são removidas, ficando apenas o texto simples.

O HTML colado é enviado para algum lado?

Não. A análise é feita com o DOMParser nativo do navegador, inteiramente no seu dispositivo — nada é enviado para um servidor.

Posso converter um array JSON de novo numa tabela HTML com esta ferramenta?

Sim — cole o array JSON (ou CSV) na segunda caixa e clique em "Converter para tabela HTML" para obter código <table> válido e devidamente escapado, com as mesmas chaves como cabeçalhos de coluna.