Construindo ferramentas para Toolz.dev significa que escrevo muitas tabelas HTML, em documentação, em e-mails para usuários, em uma página de destino simples ocasional. E uma tabela é o único bit de HTML que ninguém gosta de escrever à mão Dez linhas e cinco colunas tem mais de cinquenta tags de célula, todas as quais precisam abrir e fechar na ordem certa e falta uma </td> silenciosamente quebra todo o layout Eu tinha uma pilha de dados em uma planilha e queria a marcação, então EU construí um gerador no site Este é o guia para ele.
tl;dr: O Toolz Gerador de tabelas HTML pega dados separados por vírgulas ou tabulações e grava um completo e acessível
<table>por<thead>,<tbody>& células de cabeçalho adequadas. A primeira linha pode se tornar<th scope="col">e a primeira coluna<th scope="row">, assim leitores de tela anunciam os cabeçalhos certos Adicione uma legenda, linhas listradas e bordas, e escolha CSS baseado em classe, estilos inline para e-mail ou HTML semântico simples Cada célula é escapada Ele é executado inteiramente cliente-lado: sem upload, sem inscrição, funciona offline.
O que é um gerador de tabelas HTML?
Um gerador de tabelas HTML transforma linhas de dados na marcação HTML que os renderiza como uma tabela em um navegador Você cola valores separados por vírgulas ou separados por tabulações, escolhe como a tabela deve ser e a ferramenta grava um completo <table> elemento com <thead>, <tbody>, e as linhas e células dentro deles. Em vez de digitar todos à mão <tr>, <th>, e <td> e contando células para manter as colunas alinhadas, você cola os dados uma vez e copia a marcação de backup que está pronta para ser lançada em uma página, um modelo de e-mail ou um arquivo Markdown que permite HTML bruto.
A razão pela qual um gerador ganha seu lugar é que o HTML da tabela é prolixo e repetitivo, e a repetição é onde os erros se escondem Toda célula precisa de uma tag de abertura e um fechamento, as células de cabeçalho diferem das células de dados e a coisa toda tem que permanecer retangular ou o navegador renderiza uma bagunça esfarrapada Fazer isso à mão para qualquer coisa além de uma tabela minúscula é lento e propenso a erros A ferramenta faz isso de forma determinística: você dá os valores, ela produz marcação válida, escapada e aninhada corretamente.
Há uma camada de acessibilidade em cima da marcação bruta que uma tabela escrita à mão geralmente pula, e é a parte que mais me importa Uma tabela construída corretamente usa <th> para células de cabeçalho com a scope atributo para que a tecnologia assistiva possa anunciar a qual cabeçalho uma determinada célula de dados pertence e pode transportar um <caption> descrevendo o que a tabela contém A seção WHATWG HTML Living Standard' s sobre dados tabulares soletra esses elementos, e o gerador os aplica para você em vez de deixar a você um <div> grade que se parece com uma mesa, mas é lida como ruído para um leitor de tela.
Por que não escrever apenas a mesa à mão?
Para uma tabela dois por dois, escrever à mão é mais rápido do que abrir uma ferramenta, e você deveria O gerador ganha seu sustento nas tabelas que são realmente dolorosas: aquelas com dados reais, muitas linhas e um cabeçalho Nessas, escrever à mão tem três modos de falha recorrentes.
A primeira é uma estrutura quebrada Perder uma tag de fechamento entre cinquenta e o navegador' s recuperação de erro faz algo imprevisível, e você perde minutos caçando a célula que o iniciou A segunda é colunas inconsistentes Se uma linha tem quatro células e o resto tem cinco, a tabela torna torto, e manchar a linha curta em uma parede de tags é genuinamente difícil O terceiro está escapando: colar dados que contém um <, um &, ou um vira-lata " direto para uma célula e você quebrou a marcação ou abriu um pequeno orifício de injeção.
O gerador remove todos os três Ele almofadadas linhas curtas para que cada linha tem o mesmo número de células ea tabela permanece retangular Ele sempre fecha o que ele abre E ele HTML-escapa cada valor de célula, então a < torna-se < e exibe como texto em vez de ser lido como uma tag O que você cola é o que você obtém, renderizado com segurança.
Aqui está a decisão em uma tabela.
| situação | usar | por que |
|---|---|---|
| Uma pequena mesa dois por dois | Escreva-o à mão | Mais rápido do que abrir qualquer coisa |
| Dados reais com muitas linhas e um cabeçalho | Gerador de tabelas HTML | Escapando, aninhando e alinhamento são onde as mesas de mão se quebram |
| Você quer uma tabela Markdown em vez disso | Gerador de mesa Markdown | Mesma ideia, saída Markdown com sabor GitHub |
| Você só quer visualizar ou verificar um CSV | Visualizador CSV | Leia os dados sem gerar marcação |
Como faço para tornar a mesa acessível?
Esta é a pergunta que separa uma tabela que apenas parece certa de uma que funciona para todos, então ela obtém sua própria seção Duas coisas importam: células de cabeçalho e uma legenda.
Células de cabeçalho primeiro Em uma tabela real, as células que rotulam linhas ou colunas devem ser <th>, não <td>, e cada um <th> deve carregar um scope atributo dizendo se encabeça uma coluna (scope="col") ou uma linha (scope="row"). Os leitores de tela usam scope para anunciar o cabeçalho relevante antes de cada célula de dados, assim um ouvinte ouve o & quot;Função: Engenheiro" em vez de um & quot;Engineer" sem contexto A opção generator' s first-row-header emite <th scope="col"> para a linha superior, a opção cabeçalho da primeira coluna é emitida <th scope="row"> para a célula principal de cada linha do corpo O tutorial W3 C & #39; s WAI sobre tabelas recomenda exatamente este padrão para tabelas de dados simples.
A legenda é a segunda peça A <caption> elemento, que fica diretamente dentro da tabela, dá à tabela um título que a tecnologia assistiva lê e que os usuários com visão vêem acima da grade É o equivalente acessível da frase que você escreveria acima da tabela de qualquer maneira O gerador adiciona um quando você preenche o campo de legenda, e escapa dele como qualquer outro texto Entre uma legenda e cabeçalhos com escopo, a saída é uma tabela que um leitor de tela pode navegar em vez de uma forma pela qual ele tropeça.
Qual é a diferença entre os modos de estilo?
A ferramenta oferece três maneiras de entregar o estilo, porque para onde a mesa está indo muda o que funciona.
O modo Classe adiciona nomes de classe à tabela e gera um bloco correspondente de CSS que você pode colocar em sua folha de estilo Esta é a escolha certa para um site: a marcação permanece limpa, o estilo vive em um só lugar e recursos como o uso de listras de zebra tbody tr:nth-child(even)0, que só funciona a partir de uma folha de estilo O modo Inline escreve em vez disso os estilos directamente em cada elemento com style atributos. Essa é uma marcação mais feia, mas é o que você precisa para o e-mail HTML, onde a maioria dos clientes tira <style> blocos e CSS externo, então o estilo tem que andar junto em cada elemento Nenhum modo outputs HTML semântico simples sem classes e sem estilos em tudo, que é o que você quer quando você tem seu próprio sistema de design e só precisa de estrutura correta e acessível para pendurá-lo.
Eu alcancei o modo de classe por padrão, o modo inline somente quando estou colando em um e-mail e nenhum modo quando estou soltando a tabela em um site que já estiliza suas tabelas globalmente A ferramenta permite alternar entre elas sem inserir novamente seus dados, então tentar todos os três para ver o que cabe é um par de cliques.
Como uso o gerador?
O fluxo é de quatro passos Colar linhas separadas por vírgulas ou separadas por tabulações na caixa de entrada; o delimitador é detectado automaticamente, e você pode substituí-lo se seus dados forem ambíguos Decida se a primeira linha é um cabeçalho de coluna e se a primeira coluna de cada linha é um cabeçalho de linha Adicione uma legenda, ligue linhas listradas, bordas ou um layout compacto e escolha CSS baseado em classe, estilos inline ou HTML simples Em seguida, clique em Gerar e copiar o HTML, além do CSS correspondente no modo de classe.
A análise segue a RFC 4180, o padrão informal para CSV, de modo que um campo envolto em aspas duplas pode conter o delimitador e uma aspa dupla dentro de um campo citado torna-se uma única aspa Isso significa uma célula como "Doe, Jane" fica uma célula em vez de dividir na vírgula E como tudo é executado no seu navegador, você pode colar dados que incluem nomes de clientes, figuras internas ou qualquer outra coisa que você não gostaria em um servidor, e isso nunca sai da sua máquina Esse modelo do lado do cliente é o mesmo atrás do resto do site, descrito no ferramentas online de privacidade de dados guia.
Como isso se encaixa com as outras ferramentas?
O gerador de tabelas HTML fica em um pequeno grupo de ferramentas que recebem dados estruturados e devolvem a marcação de limpeza. Seu vizinho mais próximo é o Gerador de mesa Markdown, que faz o mesmo trabalho, mas gera Markdown com sabor GitHub para READMEs e problemas em vez de HTML para páginas da web. Quando a marcação da tabela gerada e #39;s deseja arrumar, ou você tem uma pilha de HTML de tabela escrita à mão para reindentar, o Formatador HTML embeleza-o E quando você está se movendo entre HTML e documentos Markdown, o Conversor HTML para Markdown lida com a viagem de ida e volta, mesas incluídas.
A ideia de conexão é que os dados vivem em uma forma e você precisa deles em outra, e uma ferramenta determinística faz a tradução melhor do que uma pessoa editando tags à mão Se você construir para a web, o Kit de ferramentas para desenvolvedores web roundup mostra como eles se encaixam e o Ferramentas de produtividade do desenvolve guia cobre o conjunto mais amplo de pequenos utilitários que economizam alguns minutos cada, muitas vezes por dia.
Um exemplo trabalhado de escrever documentação
Deixe-me tornar isso concreto Grande parte da documentação em torno do site é um conjunto de comparações de recursos e tabelas de referência: qual ferramenta faz o quê, quais limites se aplicam onde, o que uma determinada opção significa A maioria desses dados começa a vida em uma planilha, porque uma planilha é onde é fácil editar e classificar Colocá-lo em uma página costumava significar exportar para Markdown, que algumas de minhas páginas não renderizam, ou digitar manualmente a tabela HTML, que para uma referência de vinte linhas é dez minutos genuinamente miseráveis.
Agora copio as colunas diretamente para fora da planilha, que coloca valores separados por tabulações na área de transferência, cole-os no gerador e deixe-o detectar automaticamente o delimitador de tabulações Mantenho a primeira linha como cabeçalho, adiciono uma legenda descrevendo a tabela, ligo linhas e bordas listradas no modo classe e copio o HTML e o CSS. A marcação cai na página, o CSS entra na folha de estilo uma vez e é reutilizado por todas as tabelas depois disso, e a coisa toda leva menos de um minuto As células do cabeçalho saem como <th scope="col">, então a tabela é acessível sem que eu pense nisso, e cada valor é escapado, então a linha que contém a < em um código, a referência não explode a página.
A razão pela qual EU uso o gerador em vez de escrever à mão essas tabelas não é que o HTML é difícil, é que o HTML é chato e as partes chatas são onde EU introduzo bugs Descarregar a tag-typing, o escape, e os atributos de acessibilidade a uma ferramenta significa que a tabela está correta na primeira pasta, e EU gasto minha atenção no conteúdo da tabela em vez de seu encanamento Para o e-mail, EU regenero os mesmos dados no modo inline, porque a ferramenta de newsletter tiras <style> blocos, e a versão inline sobrevive à viagem intacta.
Quais são os limites que vale a pena conhecer?
Algumas bordas honestas. A primeira é que esta ferramenta é construída dados tabelas, do tipo com cabeçalhos e linhas de valores Não é uma ferramenta de layout, e não faz colspan ou rowspan, os truques de células mescladas que você às vezes vê em tabelas complexas As células mescladas tornam uma tabela muito mais difícil para os leitores de tela navegarem de qualquer maneira, e para a grande maioria dos dados tabulares você não precisa deles Se você realmente precisa de um cabeçalho mesclado abrangendo várias colunas, isso é uma edição manual para a marcação gerada e o Formatador HTML vai mantê-lo arrumado depois.
A segunda é que o gerador lê seus dados como texto e não tenta ser inteligente sobre tipos Uma coluna de números é emitida como texto em cada célula, o que é exatamente certo para exibição; ele não alinha números à direita ou adiciona separadores de milhares, porque essas são decisões de estilo e formatação que pertencem a você O que garante é que o valor que você colou é o valor na célula, escapou e inalterado.
A terceira é a ambiguidade do delimitador A detecção automática funciona encontrando o separador que dá a contagem de colunas mais consistente em suas linhas, e é confiável para CSV e TSV limpos Se seus dados forem genuinamente ambíguos, por exemplo, valores que contêm vírgulas não citadas em algumas linhas, a detecção pode adivinhar errado, e é por isso que o delimitador é uma substituição manual em vez de uma decisão fixa Defina explicitamente e a análise é determinística.
Finalmente, o CSS gerado no modo classe é um ponto de partida sensato e neutro: um fundo de cabeçalho leve, bordas finas, preenchimento confortável. Destina-se a ser editado. Altere as cores para combinar com sua marca, ajuste o preenchimento, solte as listras; é CSS comum com nomes de classes claros e a ferramenta & #39; O trabalho é salvar o primeiro rascunho, não ditar a aparência final.
Perguntas frequentes
O que é um gerador de tabelas HTML? Um gerador de tabela HTML converte linhas de dados na marcação HTML que os renderiza como uma tabela Você cola valores CSV ou separados por tabulações e ele grava um completo elemento com , e células, portanto você não precisa digitar cada tag manualmente.
Como converto CSV para uma tabela HTML? Cole seu CSV na caixa de entrada, mantenha a primeira linha como cabeçalho se ele contiver nomes de colunas, escolha seu estilo e clique em Gerar. A ferramenta detecta o delimitador, constrói a tabela e fornece HTML que você pode copiar diretamente para uma página.
Como faço para tornar a mesa acessível? Use células de cabeçalho e uma legenda Ative o cabeçalho da primeira linha para que os títulos das colunas se tornem , habilite o cabeçalho da primeira coluna para rótulos de linha e adicione uma legenda descrevendo a tabela Os leitores de tela anunciam o cabeçalho correto para cada célula.Qual é a diferença entre os modos de estilo? O modo Classe adiciona nomes de classe e um bloco CSS separado, o que é melhor para um site O modo Inline escreve estilos diretamente em cada elemento, o que sobrevive ao colar em um e-mail Nenhum modo gera HTML semântico simples para que você possa aplicar sua própria folha de estilo.
Os caracteres especiais nos meus dados escaparam? Sim. Cada valor de célula é eliminado por HTML, por isso caracteres como o & lt;, o & gt;, o & amp; e o & quot; são escritos como entidades e apresentados como texto em vez de serem interpretados como marcação Isto evita que a tabela se parta quando os dados contêm parênteses angulares ou ampersands.
Ele consegue lidar com vírgulas dentro de uma célula? Sim. o analisador segue RFC 4180, de modo que um campo envolto em aspas duplas pode conter o delimitador, e uma aspas duplicadas dentro de um campo citado torna-se uma única aspas As aspas citadas permanecem parte da célula em vez de iniciar uma nova coluna.
Meus dados são carregados em qualquer lugar? Não. A conversão acontece inteiramente no seu navegador usando JavaScript no seu dispositivo. Seus dados nunca são carregados, registrados ou armazenados, e a ferramenta continua trabalhando com a rede desconectada assim que a página for carregada.
O gerador de tabelas HTML é gratuito? Sim. é totalmente gratuito sem inscrição, sem marca d'água e sem limite de uso Gere quantas tabelas HTML você precisar para projetos pessoais ou comerciais.
