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.

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

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 @hugh 2024-06-25T11:17:04Z

Check documentPerform check on document:
77 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

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

2 Likes

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>
8 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 !

3 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

10 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

2 Likes

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

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

5 Likes

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

4 Likes

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

6 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.

2 Likes