# Adding a table to your post using markdown
**URL:** https://meta.discourse.org/t/adding-a-table-to-your-post-using-markdown/66544
**Category:** Using Discourse
**Tags:** tutorial
**Created:** [July 20, 2017, 7:58pm UTC](https://meta.discourse.org/t/adding-a-table-to-your-post-using-markdown/66544 "2017-07-20T19:58:37Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [July 20, 2017, 7:58pm UTC](https://meta.discourse.org/t/adding-a-table-to-your-post-using-markdown/66544/1 "2017-07-20T19:58:37Z")
> š This guide explains how to add tables to your Discourse posts using Markdown.
>
> š 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 **ā** 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 **ā 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:
```plaintext
| 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:
```plaintext
| 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 | š |
## Alignment
You can control the alignment of column contents with colons (`:`):
- Left-aligned: `|:---|`
- Center-aligned: `|:---:|`
- Right-aligned: `|---:|`
Example:
```plaintext
| 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 |
| š | š | š |
## 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:
```plaintext
| 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](https://www.google.com/) | 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:
```plaintext
Image | Description
---|---
 | 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:
```plaintext
[](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:
```plaintext
| Image 1 |
|---|
| [](https://meta.discourse.org/)
```
This results in:
| Image 1 |
| --- |
| [](https://meta.discourse.org/) |
## 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](https://tableconvert.com/?output=markdown) to convert tables from other formats (CSV, JSON, etc.) into Markdown.
> Last edited by @Lilly 2025-06-17T14:31:14Z
>
> > **Check document**
> >
> > Perform check on document:
---
### Author:  [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [July 21, 2017, 12:51am UTC](https://meta.discourse.org/t/adding-a-table-to-your-post-using-markdown/66544/4 "2017-07-21T00:51:44Z")
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](http://www.tablesgenerator.com/markdown_tables)
---
### Author:  [@Biscuit](https://meta.discourse.org/u/Biscuit)
#### Post date: [November 28, 2017, 5:30am UTC](https://meta.discourse.org/t/adding-a-table-to-your-post-using-markdown/66544/5 "2017-11-28T05:30:03Z")
Is there any way to add the vertical borders between columns, without using CSS?
---
### Author:  [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [November 28, 2017, 3:24pm UTC](https://meta.discourse.org/t/adding-a-table-to-your-post-using-markdown/66544/6 "2017-11-28T15:24:01Z")
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;
}
```
---
### Author:  [@Biscuit](https://meta.discourse.org/u/Biscuit)
#### Post date: [November 28, 2017, 10:42pm UTC](https://meta.discourse.org/t/adding-a-table-to-your-post-using-markdown/66544/7 "2017-11-28T22:42:00Z")
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.
---
### Author:  [@W.M](https://meta.discourse.org/u/W.M)
#### Post date: [April 1, 2018, 1:59pm UTC](https://meta.discourse.org/t/adding-a-table-to-your-post-using-markdown/66544/11 "2018-04-01T13:59:07Z")
How to add a custom `class` attribute to the table?
---
### Author:  [@ChameleonScales](https://meta.discourse.org/u/ChameleonScales)
#### Post date: [May 11, 2018, 2:36pm UTC](https://meta.discourse.org/t/adding-a-table-to-your-post-using-markdown/66544/12 "2018-05-11T14:36:11Z")
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 `` but apparently the vertical bar `|` inside the brackets breaks the table.
Is there a way around this problem ?
---
### Author:  [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [May 11, 2018, 2:56pm UTC](https://meta.discourse.org/t/adding-a-table-to-your-post-using-markdown/66544/13 "2018-05-11T14:56:42Z")
You can use html to make a clickable thumbnail, it will be less perfect, but itāll work
`![]()
`
Edit: uh wait, I just have a little doubt, Iām not sure html is supported in tables
---
### Author:  [@ChameleonScales](https://meta.discourse.org/u/ChameleonScales)
#### Post date: [May 11, 2018, 3:43pm UTC](https://meta.discourse.org/t/adding-a-table-to-your-post-using-markdown/66544/15 "2018-05-11T15:43:04Z")
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.
---
### Author:  [@notriddle](https://meta.discourse.org/u/notriddle)
#### Post date: [May 11, 2018, 8:30pm UTC](https://meta.discourse.org/t/adding-a-table-to-your-post-using-markdown/66544/16 "2018-05-11T20:30:28Z")
## Hereās a table with clickable thumbnails in it
| Your picture | My picture |
| --- | --- |
|
|
|
## Hereās how I did it
```html
| Your picture | My picture |
|---|
|
|
|
```
---
### Author:  [@ChameleonScales](https://meta.discourse.org/u/ChameleonScales)
#### Post date: [May 11, 2018, 9:18pm UTC](https://meta.discourse.org/t/adding-a-table-to-your-post-using-markdown/66544/17 "2018-05-11T21:18:51Z")
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 !
|
|
|
|
|
|
|
|
|
---
### Author:  [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [May 11, 2018, 9:44pm UTC](https://meta.discourse.org/t/adding-a-table-to-your-post-using-markdown/66544/18 "2018-05-11T21:44:02Z")
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](https://meta.discourse.org/t/pictures-dont-upload-well-into-tables-because-of-the-straight-bar-symbol/86063)
---
### Author:  [@ChameleonScales](https://meta.discourse.org/u/ChameleonScales)
#### Post date: [May 11, 2018, 11:05pm UTC](https://meta.discourse.org/t/adding-a-table-to-your-post-using-markdown/66544/19 "2018-05-11T23:05:10Z")
Perfect ! Thank you š¤£
---
### Author:  [@adrianbblk](https://meta.discourse.org/u/adrianbblk)
#### Post date: [May 13, 2018, 8:14am UTC](https://meta.discourse.org/t/adding-a-table-to-your-post-using-markdown/66544/20 "2018-05-13T08:14:33Z")
Is there a way to make it responsive? I mean the width of the table to adjust based on the screen size?
Thanks
---
### Author:  [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [May 13, 2018, 3:28pm UTC](https://meta.discourse.org/t/adding-a-table-to-your-post-using-markdown/66544/21 "2018-05-13T15:28:15Z")
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
---
### Author:  [@Ayayo](https://meta.discourse.org/u/Ayayo)
#### Post date: [March 15, 2020, 8:49am UTC](https://meta.discourse.org/t/adding-a-table-to-your-post-using-markdown/66544/22 "2020-03-15T08:49:19Z")
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](https://tableconvert.com/?output=markdown) 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.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [March 15, 2020, 8:54am UTC](https://meta.discourse.org/t/adding-a-table-to-your-post-using-markdown/66544/23 "2020-03-15T08:54:30Z")
Itās not all that bad:
| hello | there |
| --- | --- |
| minimal | table |
```
|hello|there|
|-|-|
|minimal|table|
```
But sharing tools is always good too. š
---
### Author:  [@justin](https://meta.discourse.org/u/justin)
#### Post date: [March 15, 2020, 3:34pm UTC](https://meta.discourse.org/t/adding-a-table-to-your-post-using-markdown/66544/24 "2020-03-15T15:34:32Z")
I always forget the syntax because I create tables maybe once every 3 months š¤¦āāļø
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [March 15, 2020, 4:23pm UTC](https://meta.discourse.org/t/adding-a-table-to-your-post-using-markdown/66544/25 "2020-03-15T16:23:11Z")
Just remember the pipe key and you are 90% of the way there!
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [March 15, 2020, 4:51pm UTC](https://meta.discourse.org/t/adding-a-table-to-your-post-using-markdown/66544/26 "2020-03-15T16:51:27Z")
> [@Steven](#):
>
> 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
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.
[Next page](https://meta.discourse.org/t/adding-a-table-to-your-post-using-markdown/66544.md?page=2)