Markdown の表は CommonMark 本体ではなく、GitHub Flavored Markdown(GFM)の拡張機能です。仕様は GFM 仕様書の 4.10 節 にまとまっていて、量は多くありません。ただ、そのうちのいくつかを外すと表がまるごと普通の段落として表示されます。この記事では、2026-10-02 に Qiita のレンダラー(qiita_marker 0.23.9.0)、Zenn のレンダラー(zenn-markdown-html 0.5.4)、GitHub と Gitee の Markdown API、micromark(remark・MDX・Astro が使うパーサー)で実際に描画した結果をもとに、書き方と崩れる原因を説明します。
表の基本形:見出し行・区切り行・本文
| 名前 | 担当 |
| ---- | ---------- |
| 佐藤 | バックエンド |
| 鈴木 | フロントエンド |
1 行目が見出し行、2 行目が区切り行(見出しのセルと同じ数だけ - を並べる)、3 行目以降が本文です。行頭と行末の | は省略できますが、列が 1 つだけの表では見出し行か区切り行のどちらかに | が必要です。a の次の行が --- だと、表ではなく見出し(Setext 見出し)になります。
区切り行の - は GFM 仕様では 1 個で足ります。Obsidian のヘルプ は 2 個以上としているので、どこでも通るように 3 個書いておくのが無難です。上の例はセルの幅がそろっていませんが、表示には影響しません。
列の配置:コロンの位置で決まる
| 区切り行のセル | 配置 | 出力される HTML |
|---|---|---|
--- | 指定なし(ブラウザの既定。多くは左) | align 属性なし |
:--- | 左揃え | align="left" |
:---: | 中央揃え | align="center" |
---: | 右揃え | align="right" |
金額や件数の列は右揃えにすると桁がそろって読みやすくなります。見出しのセルも同じ配置になります(GitHub の HTML では th にも align が付きます)。
表が崩れる 3 つのパターン
1. 見出し行と区切り行のセル数が違う
| 項目 | 内容 | の下に |---| しかないと、表になりません。Qiita、Zenn、GitHub、Gitee、micromark のどれでも、3 行がそのまま段落として表示されます。本文の行はセル数が違っても表になり、足りないセルは空欄、多すぎるセルは何も言わずに捨てられます。
2. 表の前後に空行がない
表は空行か、別のブロック(見出し・箇条書き・引用・コードブロック)が始まるところで終わります。表の直後に普通の文を書くと、その文が表の最後の行になります。
# 議事録
次の通り決まりました。
| 名前 | 担当 |
| --- | --- |
| 佐藤 | API |
次回は来週です。
この場合、「次回は来週です。」は表の 2 行目の 1 列目に入ります。前の段落の直後から表が始まる点は 5 つのレンダラーで共通です。表の前後には空行を入れてください。markdownlint 0.40.0 では MD058(blanks-around-tables)がこれを指摘します。
3. 縦棒やハイフンが全角になっている
全角入力のまま書いた | や ー は区切りとして扱われません。GFM が認めるのは半角の | と - だけで、上の 5 つのレンダラーはどれも表にせず文章として表示しました。Markdown 表作成ツールの「データ取り込み」に貼り付けると、半角に読み替えて取り込みます。
|項目|内容|
|ーー|ーー|
|締切|10月31日|
| 項目 | 内容 |
| ---- | -------- |
| 締切 | 10月31日 |
パイプとバックスラッシュ
セルの中に | を書くときは \| とエスケープします。コード(バッククォート)の中でも同じです。表はセルの中身を解釈する前に | で行を区切るため、`a|b` と書くと `a のところでセルが終わります。`a\|b` と書けば、どのレンダラーでもコード a|b として表示され、バックスラッシュは消えます。正規表現の (png|jpg) を表に入れるなら (png\|jpg) です。
バックスラッシュ自体の直後にパイプを置くと、レンダラーで結果が分かれます。セルに x\\|y と書いた場合:
GitHub・Gitee・Qiita・Zenn 1 セル(表示は x|y)
micromark(remark・MDX・Astro) 2 セル(x\ と y)
GitHub と markdown-it(Zenn が使用)は、バックスラッシュの後のパイプを常にエスケープ済みとみなします。micromark は \\ を先に「エスケープされたバックスラッシュ」と読むので、その後のパイプで区切ります。\| という文字列そのものを表示したいときは \\\| と 3 個書けば、5 つとも \| と表示します。
セルの中で改行したい
セルの中身は 1 行で、入れられるのはインラインの要素(強調・コード・リンク・画像)だけです。箇条書きやコードブロックは入りません。改行したいときは <br> を使います。Qiita、Zenn、GitHub、Gitee では改行として表示されました。GitLab のドキュメントも <br> での改行と、<br>- 項目 を並べて箇条書き風にする例を載せています。HTML を取り除く環境では <br> が文字として見えるので、公開先で確かめてください。Zenn のレンダラーは HTML をサニタイズしたうえで <br /> を残しました。Qiita は qiita_marker が <br> を出力し、その後に通す qiita-markdown 1.7.0 のサニタイザーも許可する要素に br を含めています。
結合セル(colspan・rowspan)は GFM にはありません。どうしても必要なら HTML の <table> で書きます。
日本語ならではの注意
太字が効かない
**注意:**ここ は、Qiita・Zenn・GitHub・Gitee・micromark のどれでも太字になりません。これは表の規則ではなく CommonMark の強調の規則で、閉じる ** が「全角の句読点」と「文字」に挟まれていると強調が閉じません。**注意**:ここ と、コロンを外に出せば太字になります。
○ と × の幅
表のソースの列をそろえたいとき、漢字やかなは半角 2 文字分の幅で数えます(Unicode UAX #11 の East Asian Width)。○ や ×、①、→ は「曖昧」(Ambiguous)に分類される文字で、欧文フォントでは半角、日本語の古い文字コード(Shift_JIS など)では全角として扱われてきました。料金プランの ○× 表を作るときは、エディターでの見え方に合わせて「幅が曖昧な文字を全角として数える」をオンにします。
| 機能 | 無料版 | 有料版 |
| ---------- | :----: | :----: |
| 共有リンク | ○ | ○ |
| SSO | × | ○ |
ソースの列がそろっているかどうかは、表示結果には関係しません。レビューのしやすさの問題です。
Excel やスプレッドシートから表にする
Excel や Google スプレッドシートでセル範囲をコピーし、ツールのグリッドに貼り付ければ、手で | を打つ必要はありません。左上が空欄の表も列がずれず、セル内の改行は <br> に、データ中の | は \| になります。
| | 4月 | 5月 |
| ---- | ----: | ---------------------- |
| 東京 | 1,200 | 未確定:<br>先方確認中 |
| 大阪 | 980 | |
データに * や _ が入っていて、書式にしたくない場合は「セルの内容」をプレーンテキストにすると \* \_ とエスケープされます(user_id のような単語の中の _ はそのままです)。
手書きの表をそろえ直したいときは、「データ取り込み」に既存の Markdown テーブルを貼り付けます。GitHub と同じ規則で読み込み、セル数の足りない行には空欄を足し、見出しより長い行は捨てずに列を追加して知らせます(GitHub ではその余分なセルは表示されません)。コードの中の \| もそのまま残ります。
markdownlint で崩れを機械的に見つける
表の崩れは目で見ても気づきにくいので、Markdown をリポジトリで管理しているなら markdownlint に任せるのが確実です。上の「議事録」の例を markdownlint 0.40.0 の既定のルールでチェックすると、次のように報告されます(行番号とルール名、メッセージは要約)。
4 MD058/blanks-around-tables 表の前後に空行がない
7 MD055/table-pipe-style 行頭と行末のパイプがない(「次回は来週です。」の行)
7 MD056/table-column-count Expected: 2; Actual: 1; Too few cells
7 行目が表の行として扱われていることが、そのまま MD055 と MD056 に現れています。見出しより多いセルは Too many cells, extra data will be missing と出ます。表のソースの列そろえまで揃えたいなら MD060 を style: aligned にします。MD060 は全角文字を 2 桁として数える string-width というパッケージで幅を測るので、日本語の表でも「列がそろっているか」を正しく判定できます。このツールの「列をそろえる」も同じ数え方なので、曖昧幅のオプションをオフにした出力はそのまま MD060 を通ります(オンにすると ○ などを 2 桁で数えるため、MD060 とは数え方がずれます)。
公開前に確かめること
- 見出し行と区切り行のセル数が同じか。
- 表の前後に空行があるか。
- セル内の
|は、コードの中も含めて\|になっているか。 |や-が全角になっていないか。- セル内改行の
<br>が公開先で使えるか。 - 太字の
**が全角の句読点の内側に来ていないか。 - Qiita や Zenn ならプレビュー、GitHub ならプルリクエストの「Preview」で表示を見る。CI では markdownlint の MD055・MD056・MD058・MD060 で表の崩れを機械的に検出できます。