Adicionando uma tabela à sua postagem usando markdown

:bookmark: Este guia explica como adicionar tabelas às suas publicações do Discourse usando Markdown.

:person_raising_hand: Nível de usuário necessário: Todos os usuários

Adicionar tabelas às suas publicações pode ajudar a apresentar dados em um formato estruturado e fácil de ler. Este guia mostrará como criar tabelas em Markdown no Discourse, abordando os conceitos básicos das tabelas, alinhamento e recursos especiais, como adicionar emojis e imagens.

Usando o Construtor de Tabelas

O Discourse inclui um Construtor de Tabelas integrado que permite criar e editar tabelas usando uma interface semelhante a uma planilha — sem necessidade de conhecimento de Markdown.

Para inserir uma nova tabela:

  1. Abra o editor de composição
  2. Clique no botão :heavy_plus_sign: na barra de ferramentas (o menu de opções)
  3. Selecione Inserir tabela
  4. Use o editor de planilha para adicionar seus cabeçalhos e dados
  5. Clique em Construir Tabela para inserir a tabela Markdown gerada na sua publicação

Para editar uma tabela existente em uma publicação, clique no botão :pencil2: Editar Tabela que aparece acima da tabela (visível para usuários com permissões de edição). Isso abre o mesmo editor de planilha pré-preenchido com os dados da tabela.

Criando uma tabela simples

Criar uma tabela no Discourse usando Markdown é simples. Aqui está um guia passo a passo:

  1. Comece definindo o cabeçalho:
  • A primeira linha da sua tabela conterá os cabeçalhos de cada coluna.
  • A segunda linha separa os cabeçalhos do restante da tabela.

Aqui está um exemplo de uma tabela com três colunas:

| Col A | Col B | Col C |
|---|---|---|

Isso resulta em:

Col A Col B Col C
  1. Adicione linhas de dados:
  • Cada linha começa e termina com o caractere |.
  • Certifique-se de que o número de colunas corresponda ao do cabeçalho.

Exemplo:

| Col A | Col B | Col C |
|---|---|---|
| A1 | B1 | C1 |
| A2 | B2 | :smile: |

Isso resulta em:

Col A Col B Col C
A1 B1 C1
A2 B2 :smile:

Alinhamento

Você pode controlar o alinhamento do conteúdo da coluna com dois pontos (:):

  • Alinhado à esquerda: |:---|
  • Centralizado: |:---:|
  • Alinhado à direita: |---:|

Exemplo:

| Esquerda | Centro | Direita |
|:---|:---:|---:|
| Meu conteúdo está à esquerda | Eu sou o centro do mundo | Eu gosto de ficar no lado direito |
| :waxing_gibbous_moon: | :full_moon: | :waning_gibbous_moon: |

Isso resulta em:

Esquerda Centro Direita
Meu conteúdo está à esquerda Eu sou o centro do mundo Eu gosto de ficar no lado direito
:waxing_gibbous_moon: :full_moon: :waning_gibbous_moon:

Links clicáveis em Tabelas

Adicionar links clicáveis dentro de tabelas pode ser útil para direcionar os usuários a recursos específicos ou conteúdo externo.

Para incluir um link clicável, use a sintaxe de link Markdown padrão dentro de uma célula de tabela. O formato é [Texto do Link](URL).

Exemplo:

| Coluna A | Coluna B | Coluna C |
|---|---|---|
| [Google](https://www.google.com) | Texto de Exemplo | Outro Link |

Isso resulta em:

Coluna A Coluna B Coluna C
Google Texto de Exemplo Outro Link

Imagens em Tabelas

Para usar imagens em tabelas, você precisará usar o caractere de escape \ antes do pipe | no código da imagem após carregá-la.

Exemplo:

Imagem | Descrição
---|---
![Um Chihuahua saboreando um expresso \\|411x500, 30%](upload://yHjzeeWrEA1oWYMT9ATBOPudbKk.jpeg) | Um Chihuahua saboreando um expresso em um café.

Isso resulta em:

Image Descrição
Um Chihuahua saboreando um expresso em um café.

Imagens Clicáveis em Tabelas

Para tornar uma imagem clicável, você pode aninhar a sintaxe Markdown da imagem dentro da sintaxe Markdown do link. Aqui está o formato básico:

[![texto alternativo](URL da imagem)](URL do link)

O texto alternativo é importante para acessibilidade, pois descreve a imagem se ela não carregar ou for usada por leitores de tela. Sempre use texto alternativo significativo.

Veja como você pode incorporar imagens clicáveis em uma tabela Markdown:

| Imagem 1 | 
|---|
| [![Logo do Discourse](upload://38VzhGhUKzAURX4FN7LfBEpX6r1.png)](https://meta.discourse.org/)

Isso resulta em:

Imagem 1
Discourse Logo

Copiar e colar tabelas

Você pode copiar tabelas de documentos externos ou planilhas e colá-las diretamente nas publicações; o Discourse as converterá automaticamente em Markdown.

Se você cria tabelas com frequência, também pode usar ferramentas como TableConvert para converter tabelas de outros formatos (CSV, JSON, etc.) em Markdown.

77 curtidas

Great guide!

Also, if you have a Spreadsheet or a CSV file, and don’t want to convert it manually, I always use this online tool: Markdown Tables generator - TablesGenerator.com

37 curtidas

Is there any way to add the vertical borders between columns, without using CSS?

2 curtidas

Sadly no. You’d have to add it on the css customize section

Something like that should do it :

.cooked table td, .cooked table th, .d-editor-preview table td, .d-editor-preview table th {
    border-right: 1px solid #eee;
    border-left: 1px solid #eee;
}
7 curtidas

Thanks. I don’t have admin rights, so unfortunately I can’t modify CSS.

I was hoping an ASCII character like a plus sign would add a vertical border in the table. eg:

+---+---+ 

Sounds like that’s not available.

1 curtida

How to add a custom class attribute to the table?

1 curtida

How can we make a table of clickable thumbnails ?
I don’t want to use a “hyperlink thumbnail” which would lead you to a new page but rather use Discord’s slideshow tool.
I know we can make thumbnails by using ![title|230x180](image-url) but apparently the vertical bar | inside the brackets breaks the table.
Is there a way around this problem ?

2 curtidas

You can use html to make a clickable thumbnail, it will be less perfect, but it’ll work

<a href=""><img src="" width="" height=""></a>

Edit: uh wait, I just have a little doubt, I’m not sure html is supported in tables

2 curtidas

As I said, I don’t want hyperlink images that open a new page.

I want clickable thumbnails that open directly in Discourse and let you slide through the gallery without leaving the website. Just like this :





but inside a table.

1 curtida

Here’s a table with clickable thumbnails in it

Your picture My picture

jeezus

Here’s how I did it

<table>
<tr><th>Your picture</th><th>My picture</th></tr>
<tr>
<td>

![Bayon%20temple|271x180](upload://icDRdwwiwP7yGzIQNRNG9R8pLTN.jpg)

</td><td>

![jeezus|225x225](//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/d/0/d0cea6798be0f38d39a73056bc45a57ec8a55fba.jpg)

</td>
</tr>
</table>
8 curtidas

Thanks, I actually found the same solution in the mean time but that’s perfect !
Would’ve been more handy in Mardown entirely but this is great already.

Boom baby !

4 curtidas

You can do it in pure markdown by escaping the pipe in the images, as we discussed here: Pictures don't upload well into tables because of the straight bar symbol

11 curtidas

Perfect ! Thank you :rofl:

1 curtida

Is there a way to make it responsive? I mean the width of the table to adjust based on the screen size?

Thanks

2 curtidas

It’s already responsive-ish, but it can be optimized

.md-table {
    width: 100%;
}

.md-table table {
    width: 100%;
}

This would be the base to something like this, the table will use all the width of the post on bigger screens. And when you reduce the size of the window, it will adapt.

But it won’t be perfect. If you have only two small columns the table will seem empty, if you have a lot of columns, it will not fit on smaller screens. But it’s a start

6 curtidas

The most difficult thing for me to do in Markdown syntax is creating tables. I do not need very complicated tables: just simple ones. But even for simple tables, the syntax for tables is … terrible…

And here comes an online TableConvert which is not only a markdown table generator but also a markdown table editor. It’s an easy thing to convert json, csv, excel, latex table and html table into markdown tables.

3 curtidas

It’s not all that bad:

hello there
minimal table
|hello|there|
|-|-|
|minimal|table|

But sharing tools is always good too. :hammer_and_wrench:

5 curtidas

I always forget the syntax because I create tables maybe once every 3 months :man_facepalming:

5 curtidas

Just remember the pipe key and you are 90% of the way there!

6 curtidas

A behavior similar to bootstrap responsive tables would be neat.
If a table is larger than your screen, it’s becomes horizontally scrollable. Couldn’t be simplier, and it works well.

2 curtidas