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 :
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:]( ":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:]( ":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 |
| Left |
Center |
Right |
| My content is on the left |
I’m the center of the world |
I like being on the right side |
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;
}
