Markdown é o formato em que escrevo quase tudo - READMEs, documentação de plugins, notas de lançamento, descrições de solicitação pull, o changelog para WP Adminify, metade das minhas notas internas Ele sai do caminho para cada construção, exceto uma No momento em que uma tabela está envolvida, EU paro de escrever e começo a contar caracteres de pipe, e o fluxo se foi Adicione uma coluna a uma tabela de cinco linhas e você está editando seis linhas à mão, mais a linha delimitadora, e você não saberá se acertou até que a página seja renderizada.
tl;dr: o Gerador de mesa de remarcação dá-lhe uma grelha de estilo de folha de cálculo, gera uma Marcação Aromatizada válida do GitHub à medida que digita e importa CSV, pasta de folha de cálculo ou uma tabela de Marcação existente para que possa reestruturá-la Definir o alinhamento por coluna com um clique e exportar Markdown, HTML ou CSV. Tudo é executado no seu navegador.
A ferramenta existe porque a sintaxe da tabela é a única parte do Markdown em que o formato de origem luta ativamente contra a edição Este guia cobre como as tabelas GFM funcionam, as regras que decidem se as suas renderizações, as armadilhas de escape que quebram linhas e como usar o gerador para as tabelas de fluxos de trabalho geralmente vêm de - uma planilha, um resultado de consulta ou uma tabela que alguém já escreveu.
O que é uma mesa Markdown?
Uma tabela Markdown é três ingredientes empilhados em uma ordem fixa: uma linha de cabeçalho, uma linha delimitadora e zero ou mais linhas de corpo As tabelas não fazem parte do núcleo Markdown - elas são uma extensão definida pelo Especificação de marcação com sabor GitHub, e é por isso que uma tabela pode renderizar no GitHub e sair como pipes literais em outro lugar As células são separadas por caracteres de pipe, e cada linha ocupa exatamente uma linha.
| Tool | Category | Offline |
| --- | --- | --- |
| JSON Formatter | Coding | Yes |
| YAML to JSON | Data | Yes |
A linha do delimitador é a parte que o torna uma tabela em vez de um parágrafo contendo pipes Deve ser a segunda linha, deve consistir em hífens com dois pontos opcionais, e deve ter o mesmo número de células que o cabeçalho Obter qualquer um desses errado e o renderizador trata todo o bloco como texto comum - e é por isso que o & quot; minha tabela renderiza como texto simples & quot; é quase sempre um problema de linha de delimitador.
As tabelas não fazem parte da especificação original do CommonMark Eles chegaram como uma extensão GitHub Flavored Markdown e foram posteriormente adotados em quase todos os lugares: GitHub, GitLab, Bitbucket, Obsidian, Notion, Docusaurus, MkDocs, VitePress, Hugo, Jekyll, Discord e a maioria dos geradores de sites estáticos. " Quase" é a palavra operativa Um renderizador CommonMark mínimo sem extensões mostrará sua tabela como pipes literais, e a correção é emitir HTML em vez disso - o que o gerador pode fazer com um clique nas guias de saída.
Por que a sintaxe é mais difícil de manter do que parece
Ler uma tabela Markdown é fácil Manter uma é onde o custo se esconde, e vem de quatro lugares.
Estrutura vive na pontuação. Não há limite de célula, exceto um caractere que também aparece em expressões regulares, comandos shell e tipos de união TypeScript. Cada um daqueles dentro de uma célula deve escapar ou a linha ganha silenciosamente uma coluna.
O alinhamento é codificado na colocação dos dois pontos. Um dois pontos à esquerda significa alinhado à esquerda, dois pontos em ambos os lados significa centrado, dois pontos à direita significa alinhado à direita Não há palavra-chave para lembrá-lo e a diferença entre eles ---: e :--- é um personagem consecutivo que ninguém lê de perto.
A edição é multilinha. Adicionar uma coluna significa tocar em cada linha mais o delimitador Reordenar linhas significa cortar e colar sem feedback visual Excluir uma coluna é uma busca pelo enésimo tubo em cada linha.
O alinhamento da fonte é manual. Colunas acolchoadas não são necessárias - renderizadores ignoram espaços extras - mas tabelas não preenchidas são miseráveis de ler em um diferencial, então as pessoas as preenchem manualmente e depois as re-colocam sempre que uma célula & #39; O conteúdo cresce.
Um editor de grelhas remove todas as quatro Você edita as células; a sintaxe é gerada Essa é toda a premissa da ferramenta.
Como usar o Markdown Table Generator
Passo 1: Coloque seus dados na grade
Três rotas, dependendo de onde os dados já residem.
Digite. A grade abre com uma amostra preenchida Substitua as células ou pressione Limpar por três por três vazios e comece fresco.
Colar de uma planilha. Abra o painel Importar e cole um intervalo copiado do Excel, Planilhas Google, Números ou LibreOffice As planilhas colocam texto separado por guias na área de transferência e o importador detecta isso automaticamente - não há necessidade de informar qual delimitador você está usando.
Cole CSV ou uma tabela existente. O mesmo painel aceita CSV, exportações separadas por ponto e vírgula (o padrão em muitos locais europeus), texto delimitado por pipe e tabelas Markdown Se o texto se parece com uma tabela Markdown - uma linha de cabeçalho seguida por uma linha delimitadora - ele é analisado como um, incluindo seus alinhamentos de coluna, para que você possa carregar uma tabela de um README, reestruturá-la e colá-la novamente.
A importação de CSV segue as regras da RFC 4180 em vez de dividir em vírgulas ingenuamente Um campo citado pode conter vírgulas, quebras de linha e aspas duplicadas que representam um caractere de aspas literais Isso importa mais do que parece: qualquer exportação contendo um endereço, uma descrição ou um preço em um local que use vírgulas quebrará uma divisão ingênua e você não notará até que uma coluna esteja a uma célula do limite Se o seu CSV for grande o suficiente para que você queira inspecioná-lo antes de importar, o Visualizador de CSV abre-o primeiro numa grelha classificável.
Passo 2: Forme a mesa
Os controles ao redor da grade cobrem as operações que são dolorosas no Markdown bruto:
- Fileira e Coluna adicionar ao fim da grelha.
- As setas ao lado de cada linha movem-na para cima ou para baixo - útil para ordenar uma tabela de comparação por tudo o que você decidiu que é mais importante.
- O botão menos em um cabeçalho de linha ou coluna o exclui, em todas as linhas de uma só vez.
- Transpor troca linhas e colunas Os dados colados de um relatório são frequentemente orientados da maneira errada para um documento, e transpor é um clique em vez de um retype completo.
Passo 3: Defina o alinhamento por coluna
Cada cabeçalho de coluna carrega três botões de alinhamento: esquerda, centro, direita Clique em um para aplicá-lo, clique novamente para retornar ao padrão render & #39; s. O gerador grava os dois pontos correspondentes na linha delimitadora.
Vale a pena usar o alinhamento deliberadamente Colunas numéricas - preços, contagens, porcentagens, durações - leem muito melhor alinhadas à direita, porque os dígitos se alinham pelo valor do lugar Valores de status curtos parecem bem centrados O texto pertence à esquerda Isso não é decoração; uma coluna de números alinhada à direita é genuinamente mais rápida para verificar o maior valor.
Passo 4: Escolha o formato de saída e copie
Três guias de saída:
Marcação produz GFM. O Colunas acolchoadas alternar controla se as células são preenchidas com espaços para que a fonte bruta se alinhe em um editor monoespaçado O preenchimento não altera nada sobre como a tabela é renderizada - é puramente para quem lê o arquivo em um diff. Tubos externos controla o tubo dianteiro e traseiro em cada linha; ambos os estilos são válidos e o estilo do tubo dianteiro é de longe a convenção mais comum.
HTML produz a <table> por <thead> e <tbody> e inline text-align estilos que correspondem aos alinhamentos de coluna Use-o para renderizadores que não possuem suporte a tabelas, para modelos de e-mail ou quando precisar colspan e células multi-linha que Markdown não pode expressar Se você quiser ir na outra direção e levantar uma tabela de uma página da web, HTML para Markdown lida com isso.
CSV fornece a grade de volta como dados, devidamente citados, para colar em uma planilha ou alimentar um script.
Copie para a área de transferência ou baixe como um .md, .html, ou .csv arquivo.
As regras de fuga que realmente quebram mesas
Dois caracteres causam quase todas as tabelas de Markdown quebradas e ambos são tratados automaticamente pelo gerador - mas você deve conhecer as regras das tabelas que edita manualmente.
O tubo. Um tubo literal dentro de uma célula deve ser escrito como \|. Sem a barra invertida, o renderizador vê um separador de colunas e sua linha ganha uma célula, jogando fora cada coluna depois disso Isso morde mais na documentação técnica, onde as células contêm coisas legitimamente como string | null, grep foo | wc -l, ou uma alternância regex. O escape funciona mesmo dentro de extensões de código backtick - um caso raro em que Markdown' s usual & quot; extensões de código são literal" regra não se aplica.
A nova linha. As tabelas GFM são estritamente uma linha por linha, portanto, uma célula não pode conter uma quebra de linha real A solução alternativa universal é um HTML <br> tag. Quando você cola conteúdo de várias linhas na grade, o gerador insere a tag para você; quando você importa uma tabela contendo <br>, ele converte de volta para uma quebra de linha real no editor para que a célula fique confortável para editar.
Vale a pena comprometer mais duas regras com a memória porque elas causam o & quot; a minha tabela não renderiza o & quot; relatórios que não têm nada a ver com a tabela em si Primeiro, uma tabela precisa de uma linha em branco antes dela quando segue um parágrafo Segundo, dentro de um item de lista, a tabela inteira deve ser recuada para a coluna de conteúdo do item & #39; s da lista - caso contrário, a lista engole a primeira linha e a linha delimitadora aterrissa no lugar errado.
De onde vêm as tabelas e como cada caso flui
Uma planilha que você foi enviado
Copie o intervalo, cole no painel Importar, carregue-o na grade, exclua as colunas que ninguém precisa, alinhe à direita a numérica, copie a Marcação. Menos de um minuto para uma tabela que levaria dez para formar manualmente.
Um resultado de consulta ou uma resposta de API
Os dados que começam como JSON geralmente precisam de um salto. Converta com json para csv, então cole o CSV no importador. Indo para o outro lado - uma tabela Markdown que você precisa como dados - exporte CSV das guias de saída e execute-o csv para json.
Uma tabela que já existe em um README
Cole-o no painel Importar Ele volta para a grade com seus alinhamentos intactos, então adicionar uma coluna ou reordenar linhas é uma edição normal, em vez de uma reescrita Este é o fluxo de trabalho que mais uso: as tabelas de documentação crescem uma linha de cada vez por meses, depois precisam de reestruturação de uma só vez.
Uma tabela de comparação que você está escrevendo do zero
Comece com a grade, digite como você pensa e deixe o preenchimento se classificar. Escrever uma comparação em uma grade em vez de na sintaxe do pipe mantém sua atenção sobre se a comparação é justa, e não sobre se as colunas se alinham.
Documentação que tem que funcionar em vários renderizadores
Gere o Markdown para as plataformas que suportam tabelas GFM, em seguida, alterne a guia de saída para HTML para o que não suporta Mesma grade, duas exportações, sem retipagem Se o seu pipeline converte Markdown para HTML de qualquer maneira, Remarcação para HTML mostra exatamente o que a conversão produz.
Tabelas de marcação versus tabelas HTML
| consideração | Tabela de marcação | Tabela HTML |
|---|---|---|
| Legibilidade da fonte | Alto - digitalizável como texto simples | Baixo - as tags dominam o conteúdo |
| Células multi-linha | Só via <br> |
Nativo, qualquer conteúdo de bloco |
| Células mescladas | não suportado | colspan e rowspan |
| Alinhamento por coluna | Sim, através de dois pontos delimitadores | Sim, via CSS ou atributos |
| Controle de estilo | nenhum | Css completo |
| Suporte renderizador | Extensão GFM, generalizada, mas não universal | Universal onde quer que HTML seja permitido |
| Amizade difícil | Bom, uma linha por linha | Pobre, muitas linhas por linha |
A regra prática: use Markdown até precisar de uma célula mesclada, um elemento de bloco dentro de uma célula ou um estilo específico Em seguida, mude essa tabela para HTML e deixe o resto do documento sozinho A maioria dos renderizadores Markdown passa HTML bruto, então misturar os dois em um arquivo é normal.
Uma nota sobre privacidade
As tabelas que as pessoas constroem são muitas vezes aquelas que preferem não carregar: preços ainda não anunciados, número de funcionários, benchmarks internos, um cliente e #39; dados colados de uma planilha.
O gerador é JavaScript do lado do cliente A grade, o analisador de importação e cada execução de exportação na página, e nada que você cole sai da sua máquina Carregue-a uma vez e ela continua funcionando offline Esse é o mesmo princípio por trás de tudo no Toolz.dev, e o raciocínio vale a pena ler na íntegra no guia sobre Privacidade de dados em ferramentas online. Se você estiver montando um conjunto mais amplo de utilitários baseados em navegador para o trabalho diário, o Guia de ferramentas de codificação e o Kit de ferramentas para desenvolvedores web cubra o que mais ganha um marcador.
Dicas práticas
Mantenha o cabeçalho curto. Com o preenchimento ligado, a célula mais larga de uma coluna define a largura de cada linha na fonte Um cabeçalho detalhado torna o arquivo bruto barulhento sem nenhum benefício de renderização.
Não tema a saída não preenchida para arquivos gerados. Se uma tabela for escrita por um script e nunca for lida como fonte, desligue o preenchimento e salve os bytes.
Classifique antes de colar. Reordenar linhas um seta-clique de cada vez é bom para cinco linhas e tedioso para cinquenta Classificar na planilha primeiro, depois importar.
Fique atento à linha vazia do cabeçalho. Com o & quot; A primeira linha é header" desligado, o gerador emite um cabeçalho vazio acima dos seus dados, porque o GFM não tem como expressar uma tabela sem cabeçalho Alguns renderizadores mostram isso como uma linha em branco fina Se isso incomoda você, exporte HTML em vez disso, que não precisa de nenhum cabeçalho.
Verifique o resultado renderizado, não a fonte. Fonte acolchoada que parece perfeita ainda pode renderizar errado se a linha delimitadora tiver o número errado de células Colar na visualização de qualquer plataforma em que você está publicando antes de chamá-lo feito.
FAQ
Como faço para criar uma tabela em Markdown?
Uma tabela Markdown precisa de uma linha de cabeçalho, uma linha delimitadora de hífens e uma linha por registro, com células separadas por caracteres de pipe Preencha a grade no gerador e a ferramenta grava essa sintaxe para você, incluindo a linha delimitadora e quaisquer dois pontos de alinhamento.
Como faço para alinhar as colunas em uma tabela de marcação?
O alinhamento é definido com dois pontos na linha delimitadora: dois pontos à esquerda alinha à esquerda, dois pontos em ambos os lados ao centro e dois pontos à direita alinha à direita Escolha um alinhamento de um cabeçalho de coluna no editor e o posicionamento correto dos dois pontos é gerado automaticamente.
Posso converter um intervalo do Excel ou do Planilhas Google em uma tabela de remarcação?
Sim. Copie as células da planilha e cole-as no painel de importação. As planilhas colocam texto separado por tabulação na área de transferência, que o importador detecta automaticamente e carrega na grade.
Como coloco um caractere de pipe dentro de uma célula da mesa?
Um tubo literal deve ser escapado com uma barra invertida ou o renderizador irá lê-lo como um separador de coluna Digite o tubo normalmente no editor e o gerador escapa dele na saída para você.
Uma célula da tabela de remarcação pode conter várias linhas?
Não com novas linhas reais, porque as tabelas GFM são estritamente uma linha por linha A solução alternativa usual é uma tag de quebra de linha HTML dentro da célula, que esta ferramenta insere automaticamente quando uma célula que você cola contém uma quebra de linha.
Por que minha tabela é renderizada como texto simples no GitHub?
A linha delimitadora é quase sempre a causa: deve ser a segunda linha e deve ter o mesmo número de células que o cabeçalho Uma linha em branco ausente antes da tabela também pode pará-la renderizando quando a tabela segue um parágrafo ou fica dentro de uma lista.
Eu tenho que preencher as colunas para que a fonte se alinhe?
Não. Os renderizadores ignoram espaços extras, portanto, uma tabela não preenchida é exibida de forma idêntica. O preenchimento existe para humanos que leem o arquivo bruto em um editor ou diff. Desligue-o com a alternância de saída preenchida se preferir uma fonte compacta.
As tabelas de remarcação são suportadas em todos os lugares?
Tabelas são uma extensão GitHub Flavored Markdown em vez de parte da especificação original CommonMark GitHub, GitLab, Obsidian, Notion, Docusaurus, e a maioria dos geradores de sites estáticos suportam-los, mas alguns renderizadores mínimos não alternam a saída para HTML se o seu é um deles.
