2024-04-15
Criar tabelas em Markdown é um processo simples que melhora a organização e apresentação de dados na web. Este guia cobre tudo o que você precisa saber, desde sintaxe básica até opções de formatação avançadas:
Markdown Toolbox
| e traços - para criar tabelas simples.:.& e | usando entidades HTML ou barras invertidas.Ao final deste guia, você estará preparado para criar tabelas claras e informativas em Markdown, tornando seu conteúdo mais estruturado e acessível.
Você pode decidir como alinhar seu texto nas colunas ajustando os traços - na linha:
:---: = O texto é alinhado à esquerda:--: = O texto é centralizado---: = O texto é alinhado à direita| Esquerda | Centro | Direita |
| :--- | :----: | ----: |
| Texto | Texto | Texto |
Por exemplo:
| Esquerda | Centro | Direita |
|---|---|---|
| Texto | Texto | Texto |
Você pode deixar o texto em negrito, itálico, adicionar links ou até mesmo código dentro das células da tabela usando truques regulares do Markdown:
** ou __* ou _Blocos de código inlinePor exemplo:
| Nome | Descrição |
|---|---|
| John | Professor que gosta de aprender coisas novas |
| Sarah | Engenheira trabalhando em projetos legais |
Isso mostra o básico de como fazer tabelas em Markdown. Com um pouco de prática, elas podem ser uma ótima maneira de organizar dados de forma clara para páginas da web ou documentos.
Ao fazer tabelas em Markdown, às vezes você vai querer incluir caracteres especiais que o formato Markdown geralmente usa para outras coisas. Por exemplo, como o Markdown usa pipes | para separar colunas, se você quiser mostrar um símbolo de pipe dentro de uma célula, precisa contornar isso.
Existem algumas maneiras de fazer isso:
Uma maneira é usar entidades de caracteres HTML. Esses são códigos especiais que permitem mostrar caracteres que têm outros significados no HTML ou Markdown. Por exemplo, & para um e comercial &, e | para um pipe |.
Veja como fica:
| Caracter | Entidade | Exemplo de Renderização |
|---|---|---|
| E comercial | & |
R&D |
| Pipe | | |
Coluna|Cabeçalho |
Você pode encontrar uma lista completa de entidades de caracteres HTML aqui.
Outra maneira é colocar uma barra inversa \ antes do caractere especial. Isso diz ao Markdown para tratar o seguinte caractere como qualquer outro texto.
\| = mostra um pipe |
\\ = mostra uma barra inversa \
Mas lembre-se, usar uma barra inversa não funciona para todos os caracteres em tabelas Markdown, como o pipe |.
Finalmente, você pode usar blocos de código Markdown para mostrar caracteres especiais exatamente como são. Basta colocá-los entre crases `.
` | * | & | \ | | `` ``
Isso ficará assim:
| * | & | \ | ` |
|---|---|---|---|
| * | & | \ | ` |
Em resumo, use entidades HTML ou barras inversas quando puder para escapar caracteres especiais. Para pipes e outros símbolos complicados, blocos de código são uma boa maneira de mostrá-los exatamente como são.
O Markdown vem em diferentes estilos, cada um com sua própria forma de tratar tabelas. Vamos ver esses estilos e algumas dicas para fazer ótimas tabelas:
GFM é o que você vê no GitHub. Ele permite criar tabelas facilmente:
| Cabeçalho 1 | Cabeçalho 2 |
|----------|----------|
| Linha 1a | Linha 1b |
| Linha 2a | Linha 2b |
Você não precisa colocar pipes | no final de cada linha, mas é uma boa ideia para evitar erros.
Essas versões adicionam mais opções para tabelas, como alinhar texto:
| Direita | Esquerda | Padrão | Centro |
|------:|:-----|---------|:-----:|
| 12 | 12 | 12 | 12 |
| 123 | 123 | 123 | 123 |
Use um dois pontos : para controlar o alinhamento do texto.
CommonMark não tem sua própria sintaxe de tabela. Você precisa usar tags HTML para fazer tabelas.
No GFM e similares, você nem sempre precisa dos pipes laterais |:
Cabeçalho 1 | Cabeçalho 2
--------- | ---------
Linha 1a | Linha 1b
Linha 2a | Linha 2b
Deixar de lado pode facilitar a edição, mas tê-los ajuda a evitar erros.
Tente ajustar as larguras das colunas para que sua tabela pareça mais organizada:
| Curto | Coluna de Exemplo Mais Longa |
|-------|-----------------------|
| Texto | Mais texto de exemplo |
Isso torna sua tabela mais fácil de ler.
Fazer tabelas do zero pode ser difícil. Aqui estão algumas ferramentas para ajudar:
O Gerador de Tabelas Markdown permite que você faça tabelas sem codificação. Basta preencher suas informações e ele te dá o código.
Conversão de Tabela transforma dados de planilhas em tabelas Markdown rapidamente.
O editor Markdown Typora tem uma maneira simples de adicionar e estilizar tabelas.
Alguns aplicativos facilitam o trabalho com tabelas Markdown:
Typora tem um menu simples para adicionar e alterar tabelas.
Zettlr permite que você insira uma tabela básica e a edite diretamente.
Saber essas dicas e ferramentas pode tornar o trabalho com tabelas Markdown muito mais suave. Lembre-se, o objetivo é tornar a informação clara e fácil de ler.
Vamos fazer algumas práticas mão na massa fazendo tabelas usando Markdown. Aqui estão alguns exercícios fáceis para te ajudar a dominar:
Primeiro, vamos fazer uma tabela simples que lista diferentes frutas:
| Fruta | Cor | Forma |
| Fruta | Cor | Forma |
| - | - | - |
| Fruta | Cor | Forma |
| - | - | - |
| Maçã | Vermelha | Redonda |
| Fruta | Cor | Forma |
| - | - | - |
| Maçã | Vermelha | Redonda |
| Banana | Amarela | Longa |
| Laranja | Laranja | Redonda |
Em seguida, vamos adicionar um pouco de estilo à nossa tabela de frutas:
** ao redor deles:| **Fruta** | **Cor** | **Forma** |
| - | - | - |
| Banana | *Amarela* | Longa |
| Laranja | [Laranja](https://www.w3schools.com/colors/colors_names.asp) | Redonda |
Para um pouco mais de desafio, vamos fazer uma tabela com mais detalhes:
| **Nome** | **Posição** | **Salário** |
| - | - | - |
| **Nome** | **Posição** | **Salário** |
| - | - | - |
| John | Gerente | $80,000 |
| Sarah | Desenvolvedora | $60,000 |
| Lisa | Designer | $50,000 |
| **Nome** | **Posição** | **Salário** |
| - | - | ---: |
Praticar com esses passos é uma ótima maneira de se familiarizar mais com a criação de tabelas Markdown. Experimente criar diferentes tipos de tabelas e brinque com a formatação para ver o que você consegue fazer.
Editar tabelas em Markdown pode ser um pouco complicado, mas conhecer alguns atalhos de teclado pode tornar tudo mais fácil. Aqui está uma lista de atalhos que podem te ajudar a trabalhar mais rápido:
Tab - Pular para a próxima célulaShift + Tab - Voltar para a célula anteriorEnter - Mover para a próxima linhaCtrl/Cmd + Enter - Parar a edição da tabelaCtrl/Cmd + Seta - Mover pela célula facilmenteCtrl/Cmd + l - Alinhar texto à esquerdaCtrl/Cmd + e - Centralizar o textoCtrl/Cmd + r - Alinhar texto à direitaCtrl/Cmd + . - Remover qualquer alinhamento específicoAlt + i - Adicionar uma nova linha acimaAlt + a - Adicionar uma nova linha abaixoAlt + j - Adicionar uma coluna à esquerdaAlt + l - Adicionar uma coluna à direitaAlt + Shift + i - Remover a linha atualAlt + Shift + a - Remover a linha atualAlt + Shift + j - Remover a coluna atualAlt + Shift + l - Remover a coluna atualShift + Seta - Selecionar mais célulasCtrl/Cmd + Alt + Seta - Mover toda a linha ou colunaFamiliarizando-se com esses atalhos, você pode acelerar seu trabalho com tabelas em Markdown. Mantenha este guia em mãos para referência rápida.
Fazer tabelas com Markdown permite que você organize informações de forma organizada para websites. É bastante simples assim que você pega o jeito. Aqui estão alguns pontos a serem lembrados:
|. Coloque traços - sob a linha do cabeçalho para mostrar como o texto deve se alinhar.: ao lado dos traços sob a coluna que você deseja ajustar.Continue praticando e logo fazer tabelas Markdown se tornará uma tarefa fácil. Lembre-se de manter suas tabelas simples e claras. O principal objetivo é compartilhar informações de uma maneira que seja fácil para todos entenderem. As tabelas Markdown são ótimas para isso, pois permitem organizar dados de maneira organizada e clara.
Para criar tabelas em Markdown, use o símbolo pipe | para fazer colunas, traços - para alinhar o texto sob os cabeçalhos e dois pontos : para alinhar o texto à esquerda, ao centro ou à direita. Comece com os cabeçalhos na primeira linha, traços na segunda para definir as colunas, e depois adicione suas informações abaixo. Mantenha tudo em ordem para uma leitura mais fácil. Alguns editores Markdown podem ajudar você a formatar a tabela com mais facilidade.
Para alinhar texto em uma tabela:
:---:---:---:Basta alterar os traços abaixo da coluna que você deseja alinhar na segunda linha.
Muitos editores Markdown, como Typora ou Zettlr, têm atalhos para inserir rapidamente uma estrutura de tabela em branco. Por exemplo, no Typora no Windows, pressionar Ctrl + T disponibilizará uma tabela em branco em seu documento. Consulte o guia do seu editor para atalhos específicos.
Para indentar um bloco de código, adicione uma linha vazia antes e depois do seu código, e indente cada linha do código com pelo menos 4 espaços ou 1 tab. Isso diz ao Markdown para formatá-lo de uma maneira especial, geralmente com uma fonte diferente para se destacar como código.