MDUtil

Markdownの表

| で列を区切り、見出し行の下にハイフンの行を書きます。配置、セルの中の書式、縦線のエスケープ、改行、Markdownの表で足りないときの方法を説明します。

要点

Markdownで表を作るには？

見出しのセルを縦線で区切って書き、次の行にハイフンの行、その後に1行ずつデータを書きます：| 名前 | 担当 |、| --- | --- |、| 田中 | デザイン |。ハイフンの行のコロンで配置が決まります。表はGitHub Flavored Markdownの記法で、GitHubや多くのエディタで使えます。

Markdown
| 名前 | 担当 | 入社 |
| --- | --- | --- |
| 田中 | デザイン | 2021 |
| 鈴木 | 開発 | 2019 |

表示結果

名前担当入社
田中デザイン2021
鈴木開発2019

表の書き方と例

ソースで列をそろえる必要はありません。縦線をもとに表が組み立てられます。

列の配置

ハイフンの左にコロンで左寄せ、両側で中央、右で右寄せです。数字には右寄せが向いています。

Markdown
| 品目 | 数量 | 価格 |
| :--- | :---: | ---: |
| りんご | 3 | 360 |
| 梨 | 12 | 1,800 |

表示結果

品目数量価格
りんご3360
梨121,800

セルの中の書式

セルには太字、インラインコード、リンク、画像、取り消し線を入れられますが、リストやコードブロックは入れられません。

Markdown
| オプション | 初期値 | 説明 |
| --- | --- | --- |
| `--force` | **オフ** | [チェック](https://example.com/checks)を省略 |
| `--quiet` | オン | ~~詳細~~ 出力なし |

表示結果

オプション初期値説明
--forceオフチェックを省略
--quietオン詳細 出力なし

セルの中の縦線と改行

セルの中の縦線は \| と書きます。コードの中でも同じです。セルの中の改行には <br> を使います。

Markdown
| 演算子 | 意味 |
| --- | --- |
| `a \| b` | a または b |
| `&&` | 両方が真、<br>左から順に評価 |

表示結果

演算子意味
a | ba または b
&&両方が真、
左から順に評価

最小限の書き方

両端の縦線と位置合わせの空白は省略できます。列をそろえるのはソースを読みやすくするためだけです。

Markdown
名前 | 担当
--- | ---
田中 | デザイン
鈴木 | 開発

表示結果

名前担当
田中デザイン
鈴木開発

空の見出し行

表には必ず見出し行があります。見出しが不要なときはセルを空にします。

Markdown
| | |
| --- | --- |
| 月曜 | ジム |
| 火曜 | ピアノ |

表示結果

月曜ジム
火曜ピアノ

HTMLでセルを結合する

Markdownの表ではセルを結合できません。HTMLが使える環境では colspan や rowspan を使ったHTMLの表を書きます。

Markdown
<table>
  <tr><th colspan="2">営業時間</th></tr>
  <tr><td>月〜金</td><td>9:00–18:00</td></tr>
  <tr><td>土</td><td>10:00–14:00</td></tr>
</table>

表示結果

営業時間
月〜金9:00–18:00
土10:00–14:00

各サービスでの対応状況

GitHub Flavored Markdownに従うアプリなら表が表示されます。チャットツールでは表示されません。

サービス対応補足
GitHub / GitLab対応配置にも対応し、幅の広い表は横にスクロールします。
Obsidian対応閲覧画面とライブプレビューで表示されます。
VS Code / Typora対応プレビューで表示され、Typoraでは表として編集できます。
Qiita / Zenn対応どちらも表と配置に対応しています。
Discord / Slack非対応表は普通の文字で表示されます。コードブロックに入れると列がそろいます。

よくある質問

表の列の配置を変えるには？

見出しの下のハイフンの行にコロンを付けます。:--- は左寄せ、:---: は中央、---: は右寄せです。

Markdownの表でセルを結合できますか？

できません。HTMLが使える環境では colspan や rowspan を使ったHTMLの表を書きます。

セルの中で改行するには？

改行したい位置に <br> を書きます。実際に改行すると表の行が終わります。

セルの中に縦線を書くには？

バックスラッシュでエスケープします：\|。インラインコードの中でも必要です。

表が表示されないのはなぜですか？

見出し行の下にハイフンの行があるか、ハイフンの行のセルの数が見出しと同じか、各行が1行に収まっているか、表の前に空白が4つ入っていないか（コードになります）を確認します。リストの中では、表を項目の文字の位置まで字下げします。

セルの中にリストやコードブロックを入れられますか？

Markdownではできません。セルに入るのは1行の文字だけです。項目を <br> で区切るか、HTMLが使える環境ではHTMLの表を使います。

表を手早く作るには？

Markdown 表ジェネレーターで表のようにセルを編集するか、CSV Markdown 変換でスプレッドシートを変換します。

DiscordやSlackで表は使えますか？

使えません。表をコードブロックに入れると列がそろったまま表示されます。