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.
Creating a simple table
Creating a table in Discourse using Markdown is straightforward. Here’s a step-by-step guide:
- 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 |
---|
- 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 |
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 |
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 |
---|---|---|
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:
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 document
Perform check on document: