Create a table using markdown on your Discourse forum


#1

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

Failed to render table in post
(Rafael dos Santos Silva) #4

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


(Biscuit) #5

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


#6

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

(Biscuit) #7

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.


#11

How to add a custom class attribute to the table?


#12

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 ?


#13

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


#15

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.


(Michael Howell) #16

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](//discourse-meta.s3-us-west-1.amazonaws.com/original/3X/d/0/d0cea6798be0f38d39a73056bc45a57ec8a55fba.jpg)

</td>
</tr>
</table>

#17

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 !


(Rafael dos Santos Silva) #18

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


#19

Perfect ! Thank you :rofl:


(Adrianbblk) #20

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

Thanks


#21

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