Create a table using markdown on your Discourse forum

Create a table on your Discourse forum


With the new markdown engine (since the version 1.9.0 b4), creating a table is really easy.

For this howto, we will use a table with three columns. You can create a table with as many columns as you want but keep in mind that the width of your post is limited, and a large table can be pretty ugly on mobile.

The base of a table is really simple, each | character will represent one column. Between two | you can add the content that you want. You need to start and finish each line of your table with the character |


First, you need to creater a header to your table. You will need two rows to do that :

  • the first one will define the title of each column.
  • the second one will create the separation with the rest of your table (and alignment, but we will see about that later)

Let’s begin :

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

Here is our base, three columns, and a title on each. The result of this code is this :

Col A Col B Col C

We now have our header, let’s create a row in our table, this is simple, it works exactly as the rest. Start and finish with | and keep track of the number of columns that you used :

| Col A | Col B | Col C|
|---|---|---|
| A1 | B1 | C1 |
Col A Col B Col C
A1 B1 C1

Do you know that emojis or markdown works in the table ? You can bold some text and add an emoji as you wish.


Let’s make our example better, I’ll add a new row with an emoji in one cell :

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

You can leave an empty cell too if you want. You need to create the columns with | as always, just leave it empty. In our example, I’ll leave the B2 cell empty :

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

The result :

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

Alignment


Like I said before, the row between the head and the rest of your table can generate the alignment of your colum. In our first examples, the row looks like this : |---|---|---|.

On each column, the character : can indicate the alignment of your column. If you put a colon : on the left of the dashes, the alignment of the entire column will be on the left. If you put on the right of the dashes, the alignment will be on the right. If you put : on each sides, your column will be centered :

| Left | Center | Right |
|:---|:---:|---:|
| My content is on the left | I'm the center of the world | I like being on the right side |
| :waxing_gibbous_moon: | :full_moon: | :waning_gibbous_moon: |
Left Center Right
My content is on the left I’m the center of the world I like being on the right side
:waxing_gibbous_moon: :full_moon: :waning_gibbous_moon:

You know pretty much all there is to know about the tables on Discourse.


Customize your table (CSS)


You can customize your table by using the css customization. You can add borders between each cells, add a background color on the header, etc. The possibilities are huge.

I’ll give you an example with a simple modification : a background color on the head, and a darker border.

Here is the result I want :

And here is the CSS :

/* table */

.cooked table thead, .d-editor-preview table thead {
    border-bottom: 2px solid #bbb !important;
    background-color: #d3d3d3;
}

.cooked table tr, .d-editor-preview table tr {
    border-bottom: 1px solid #bbb;
}
63 Likes

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

31 Likes

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

2 Likes

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;
}
6 Likes

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 Like

How to add a custom class attribute to the table?

1 Like

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 Likes

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

1 Like

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 Like

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>
7 Likes

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 !

2 Likes

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

9 Likes

Perfect ! Thank you :rofl:

1 Like

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

Thanks

1 Like

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

5 Likes

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.

2 Likes

It’s not all that bad:

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

But sharing tools is always good too. :hammer_and_wrench:

3 Likes

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

3 Likes

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

4 Likes

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.

1 Like