使用 markdown 在帖子中添加表格

:bookmark: 本指南说明如何在 Discourse 帖子中使用 Markdown 添加表格。

:person_raising_hand: 所需用户级别:所有用户

在帖子中添加表格有助于以结构化且易于阅读的格式呈现数据。本指南将引导您了解如何在 Discourse 上使用 Markdown 创建表格,涵盖表格基础知识、对齐方式以及添加表情符号和图像等特殊功能。

使用表格生成器

Discourse 包含一个内置的 表格生成器 (Table Builder),它允许您使用类似电子表格的界面创建和编辑表格——无需了解 Markdown 知识。

要插入新表格:

  1. 打开编辑器
  2. 点击工具栏中的 :heavy_plus_sign: 按钮(选项菜单)
  3. 选择 插入表格 (Insert table)
  4. 使用电子表格编辑器添加标题和数据
  5. 点击 生成表格 (Build Table) 将生成的 Markdown 表格插入到您的帖子中

要编辑帖子中现有的表格,请点击出现在表格上方的 :pencil2: 编辑表格 (Edit Table) 按钮(拥有编辑权限的用户可见)。这将打开相同的电子表格编辑器,其中预先填充了表格数据。

创建一个简单的表格

使用 Markdown 在 Discourse 中创建表格非常直接。以下是分步指南:

  1. 首先定义标题行:
  • 表格的第一行将包含每列的标题。
  • 第二行将标题行与表格的其余部分分开。

以下是一个包含三列的表格示例:

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

这将生成:

Col A Col B Col C
  1. 添加数据行:
  • 每行都以 | 字符开始和结束。
  • 确保列数与标题行中的列数匹配。

示例:

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

这将生成:

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

对齐方式

您可以使用冒号 (:) 控制列内容的对齐方式:

  • 左对齐:|:---|
  • 居中对齐:|:---:|
  • 右对齐:|---:|

示例:

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

这将生成:

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:

表格中的可点击链接

在表格中添加可点击链接对于将用户引导至特定资源或外部内容非常有用。

要包含可点击链接,请在表格单元格内使用标准的 Markdown 链接语法。格式为 [链接文本](URL)

示例:

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

这将生成:

Column A Column B Column C
Google Example Text Another Link

表格中的图像

要在表格中使用图像,在上传图像后,您需要在图像代码中管道符 | 前使用转义字符 \

示例:

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

这将生成:

Image Description
A Chihuahua enjoying espresso in a cafe.

表格中的可点击图像

要使图像可点击,您可以将图像 Markdown 语法嵌套在链接 Markdown 语法中。基本格式如下:

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

alt text 对于可访问性很重要,因为它可以在图像未加载或被屏幕阅读器使用时描述图像。请始终使用有意义的替代文本。

以下是如何将可点击图像合并到 Markdown 表格中的方法:

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

这将生成:

Image 1
Discourse Logo

复制粘贴表格

您可以从外部文档或电子表格中复制表格并直接粘贴到帖子中,Discourse 会自动将其转换为 Markdown。

如果您经常创建表格,也可以使用 TableConvert 等工具将其他格式(CSV、JSON 等)的表格转换为 Markdown。

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 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 个赞

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 个赞

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 个赞

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 个赞

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

5 个赞

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

6 个赞

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 个赞