Gerador de tabelas HTML

Para que serve

Gera o código de uma tabela HTML semântica (com thead e tbody) a partir de dados que você já tem em uma planilha ou em uma lista. Basta colar e copiar o resultado para o seu site ou artigo.

Formatos reconhecidos

Cada linha é uma linha da tabela; as células podem ser separadas por vírgula, ponto e vírgula ou tabulação (assim você pode colar direto do Excel ou do Google Planilhas), e o separador é reconhecido sozinho a partir das primeiras linhas: a tabulação, se houver, sempre vence, porque uma célula copiada do Excel pode conter vírgulas. Uma célula entre aspas duplas pode conter o separador e até uma quebra de linha, como nos arquivos CSV de verdade: “"Silva, João"” continua sendo uma única célula, enquanto uma aspa no meio do texto, como em “55"”, é um caractere como qualquer outro. A leitura dos dados é a mesma de CSV para tabela HTML. Os caracteres especiais são escapados automaticamente.

O que sai, e por que é feito assim

O que sai não é um bloco de div elementos dispostos em grade: é uma tabela de verdade, com o cabeçalho dentro de thead e as células de título como th. A diferença não é estética. Um leitor de tela, ao chegar a uma célula, anuncia a coluna a que ela pertence (“Preço: 12 euros”) apenas se essa coluna estiver declarada como título; com elementos div , ele lê uma linha de números sem contexto, e essa é a diferença entre uma tabela consultável e uma parede de dados.

Pelo mesmo motivo, o código que sai é limpo e sem estilos em linha: cor e bordas são tarefa do CSS do site que a hospeda, e uma tabela sem estilos se integra em vez de destoar.

Tabelas são para dados, não para diagramação

É uma regra de vinte anos atrás e continua valendo: usa-se uma tabela quando os dados têm linhas e colunas com significado : uma lista de preços, uma grade de horários, uma comparação, um conjunto de contas. Não se usa para colocar duas coisas lado a lado em uma página: para isso existem as grades do CSS, que se adaptam à tela, enquanto uma tabela diagramada à mão fica ilegível no celular.

No celular, ela precisa ficar dentro de algo que role

Uma tabela com cinco colunas não cabe em um celular: ou se espreme em colunas minúsculas e ilegíveis, ou transborda e faz com que a página inteira role para o lado, que é o defeito pior, porque estraga todo o resto também. A solução é uma linha: envolva a tabela em um contêiner com overflow-x: auto e dê a ele um min-width. Assim ela rola sozinha, e a página fica parada.

Veja também

Se os dados vêm de uma planilha, vale limpá-los antes com Limpar CSV; se precisarem voltar para o Excel, a ferramenta é CSV para Excel. Para uma tabela em markdown, para colocar em um documento ou em uma resposta, há o Gerador de tabelas Markdown, e para tirar uma tabela de um PDF Extrair tabelas de um PDF.