Adding a table to your post using markdown

:bookmark: This guide explains how to add tables to your Discourse posts using Markdown.

:person_raising_hand: Required user level: All users

Adding tables to your posts can help present data in a structured and easy-to-read format. This guide will walk you through creating tables in Markdown on Discourse, covering table basics, alignment, and special features like adding emojis and images.

Using the Table Builder

Discourse includes a built-in Table Builder that lets you create and edit tables using a spreadsheet-like interface — no Markdown knowledge required.

To insert a new table:

  1. Open the composer
  2. Click the :heavy_plus_sign: button in the toolbar (the options menu)
  3. Select Insert table
  4. Use the spreadsheet editor to add your headers and data
  5. Click Build Table to insert the generated Markdown table into your post

To edit an existing table in a post, click the :pencil2: Edit Table button that appears above the table (visible to users with edit permissions). This opens the same spreadsheet editor pre-populated with the table’s data.

Creating a simple table

Creating a table in Discourse using Markdown is straightforward. Here’s a step-by-step guide:

  1. Start by defining the header:
  • The first row of your table will contain the headers for each column.
  • The second row separates the headers from the rest of the table.

Here is an example for a table with three columns:

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

This results in:

Col A Col B Col C
  1. Add rows of data:
  • Each row starts and ends with the | character.
  • Ensure the number of columns matches that of the header.

Example:

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

This results in:

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

Alignment

You can control the alignment of column contents with colons (:):

  • Left-aligned: |:---|
  • Center-aligned: |:---:|
  • Right-aligned: |---:|

Example:

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

This results in:

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:

Clickable links in Tables

Adding clickable links within tables can be useful for directing users to specific resources or external content.

To include a clickable link, use the standard Markdown link syntax within a table cell. The format is [Link Text](URL).

Example:

| Column A | Column B | Column C |
|---|---|---|
| [Google](https://www.google.com) | Example Text | Another Link |

This results in:

Column A Column B Column C
Google Example Text Another Link

Images in Tables

To use images in tables, you will need to use the escape character \ before the pipe | in the image code after you upload it.

Example:

Image | Description
---|---
![A Chihuahua enjoying espresso \|411x500, 30%](upload://yHjzeeWrEA1oWYMT9ATBOPudbKk.jpeg) | A Chihuahua enjoying espresso in a cafe.

This results in:

Image Description
A Chihuahua enjoying espresso in a cafe.

Clickable Images in Tables

To make an image clickable, you can nest the image Markdown syntax within the link Markdown syntax. Here’s the basic format:

[![alt text](image URL)](link URL)

The alt text is important for accessibility, as it describes the image if it does not load or is used by screen readers. Always use meaningful alt text.

Here’s how you can incorporate clickable images into a Markdown table:

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

This results in:

Image 1
Discourse Logo

Copy-pasting tables

You can copy tables from external documents or spreadsheets and paste them directly into posts, Discourse will automatically convert them into Markdown.

If you frequently create tables, you can also use tools like TableConvert to convert tables from other formats (CSV, JSON, etc.) into Markdown.

Last edited by @Lilly 2025-06-17T14:31:14Z

Check documentPerform check on document:
77개의 좋아요

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개의 좋아요

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

2개의 좋아요

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개의 좋아요

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개의 좋아요

How to add a custom class attribute to the table?

1개의 좋아요

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개의 좋아요

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개의 좋아요

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개의 좋아요

Here’s a table with clickable thumbnails in it

Your pictureMy picture

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](//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/d/0/d0cea6798be0f38d39a73056bc45a57ec8a55fba.jpg)

</td>
</tr>
</table>
8개의 좋아요

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개의 좋아요

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개의 좋아요

Perfect ! Thank you :rofl:

1개의 좋아요

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

Thanks

2개의 좋아요

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개의 좋아요

마크다운 문법에서 제가 가장 어렵게 느끼는 부분은 표를 만드는 것입니다. 아주 복잡한 표는 필요하지 않습니다: 단순한 표만 있으면 됩니다. 그런데도 단순한 표를 만들 때 표 문법은 … 정말 끔찍합니다…

그리고 여기 TableConvert이 등장합니다. 이 도구는 마크다운 표 생성기일 뿐만 아니라 마크다운 표 편집기도 합니다. json, csv, excel, latex 표 및 html 표를 마크다운 표로 변환하는 것은 쉬운 일입니다.

3개의 좋아요

그렇게 나쁘지는 않습니다:

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

하지만 도구를 공유하는 것도 항상 좋은 일입니다. :hammer_and_wrench:

5개의 좋아요

3개월에 한 번 정도 테이블을 만들다 보니 문법을 항상 잊어버려요 :man_facepalming:

5개의 좋아요

파이프 키만 기억하면 이미 90%는 끝난 겁니다!

6개의 좋아요

Bootstrap의 반응형 테이블과 비슷한 동작 방식이 있으면 좋겠어요.
테이블이 화면보다 크면 가로로 스크롤되도록 하면 됩니다. 더 간단할 수 없고, 잘 작동해요.

2개의 좋아요