Markdownを使用して投稿にテーブルを追加する方法

[Discourse]

このガイドでは、Discourseの投稿にMarkdownを使用してテーブルを追加する方法を説明します。

必要なユーザーレベル: 全てのユーザー

投稿にテーブルを追加すると、データを構造化され読みやすい形式で提示するのに役立ちます。このガイドでは、テーブルの基本、配置、絵文字や画像の追加などの特殊機能を取り上げ、DiscourseでMarkdownを使用してテーブルを作成する方法を説明します。

テーブルビルダーの使用

Discourseには、スプレッドシートのようなインターフェースを使用してテーブルを作成および編集できる組み込みのテーブルビルダーが搭載されており、Markdownの知識は必要ありません。

新しいテーブルを挿入するには：

1. コンポーザーを開きます
2. ツールバーの****ボタン（オプションメニュー）をクリックします
3. テーブルを挿入を選択します
4. スプレッドシートエディタを使用してヘッダーとデータを追加します
5. テーブルを構築をクリックして、生成されたMarkdownテーブルを投稿に挿入します

投稿内の既存のテーブルを編集するには、テーブルの上に表示される** テーブルを編集**ボタン（編集権限を持つユーザーに表示されます）をクリックします。これにより、テーブルのデータがあらかじめ入力された同じスプレッドシートエディタが開きます。

シンプルなテーブルの作成

DiscourseでMarkdownを使用してテーブルを作成するのは簡単です。手順は次のとおりです。

1. ヘッダーを定義することから始めます。

• テーブルの最初の行には、各列のヘッダーが含まれます。
• 2行目は、ヘッダーとテーブルの残りの部分を区切ります。

3列のテーブルの例を次に示します。

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

これは次のような結果になります。

Col A	Col B	Col C

2. データの行を追加します。

• 各行は | 文字で始まり、| 文字で終わります。
• 列の数がヘッダーの列数と一致していることを確認してください。

例：

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

これは次のような結果になります。

Col A	Col B	Col C
A1	B1	C1
A2	B2

配置

コロン (:) を使用して、列の内容の配置を制御できます。

• 左寄せ: |:---|
• 中央寄せ: |:---:|
• 右寄せ: |---:|

例：

| 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

テーブル内のクリック可能なリンク

テーブル内にクリック可能なリンクを追加すると、ユーザーを特定の情報源や外部コンテンツに誘導するのに役立ちます。

クリック可能なリンクを含めるには、テーブルセル内で標準の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が自動的にMarkdownに変換します。

頻繁にテーブルを作成する場合は、TableConvert のようなツールを使用して、他の形式（CSV、JSONなど）からMarkdownにテーブルを変換することもできます。

[Falco]

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

[Biscuit]

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

[Steven]

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

[Biscuit]

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.

[W.M]

How to add a custom class attribute to the table?

[ChameleonScales]

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 ?

[Steven]

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

[ChameleonScales]

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.

[notriddle (Michael Howell)]

Here’s a table with clickable thumbnails in it

Your picture	My 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](//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/d/0/d0cea6798be0f38d39a73056bc45a57ec8a55fba.jpg)

</td>
</tr>
</table>

[ChameleonScales]

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 !

[Falco]

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

[ChameleonScales]

Perfect ! Thank you

[adrianbblk]

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

Thanks

[Steven]

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

[Ayayo]

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.

[codinghorror (Jeff Atwood)]

It’s not all that bad:

hello	there
minimal	table

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

But sharing tools is always good too.

[justin (Justin DiRose)]

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

[codinghorror (Jeff Atwood)]

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

[Canapin (Coin-coin le Canapin)]

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