Markdownの表が表示されない・崩れる。原因10パターンと直し方

公開 ・ AIの基礎

Markdown で表を書いたのに、罫線が出ない。列がずれる。一部の行だけおかしい。原因はいくつかに限られており、症状から特定できます。

よくある順に10パターン挙げます。

1. 区切り行がない

もっとも多い原因です。

| 項目 | 値 |
| 容量 | 5GB |

これは表になりません。ヘッダー行の下に、区切り行が必要です。

| 項目 | 値 |
| --- | --- |
| 容量 | 5GB |

症状:表がまったく表示されず、縦棒を含んだ普通の文章として出る。

2. 区切り行の列数が合っていない

| A | B | C |
| --- | --- |
| 1 | 2 | 3 |

区切り行が2列しかないのにヘッダーが3列です。処理系によっては表として認識されません。

症状:表にならない、または最後の列が消える。

3. 全角の縦棒を使っている

| 項目 | 値 |

日本語入力中に変換されて全角の | が入ることがあります。見た目がほぼ同じなので、目視では気づきにくい原因です。

症状:表にならない。エディタで検索して確認するのが確実。

見分け方:等幅フォントで表示すると、全角のほうが明らかに幅が広く見えます。

4. 表の直前に空行がない

以下のとおりです。
| 項目 | 値 |
| --- | --- |

前の段落と表が地続きになっていると、表として認識されない処理系があります。

以下のとおりです。

| 項目 | 値 |
| --- | --- |

症状:表の1行目が前の段落に吸収される、または全体が表にならない。

5. セル内に改行が入っている

Markdown の表は1行が1レコードです。セルの中で改行はできません。

改行を入れたい場合は <br> タグを使います(処理系が HTML を許可している場合)。

| 項目 | 説明 |
| --- | --- |
| A | 1行目<br>2行目 |

症状:1つの行が2行に分裂し、以降の行がずれる。

6. セル内に縦棒が含まれている

| コマンド | 説明 |
| --- | --- |
| a | b | パイプでつなぐ |

3列目があるように解釈されます。セル内の縦棒はバックスラッシュでエスケープします。

| a \| b | パイプでつなぐ |

インラインコードで囲む方法(`a | b`)もありますが、処理系によってはコードの中でもエスケープが必要です。確実なのはバックスラッシュです。

症状:特定の行だけ列が多くなる。

7. 列数が行によって違う

| A | B | C |
| --- | --- | --- |
| 1 | 2 |
| 1 | 2 | 3 | 4 |

厳密には不正ですが、多くの処理系は足りない分を空セルで埋め、多い分を切り捨てます。ただし挙動は統一されていません。

症状:行によって列が抜ける、または余分な値が消える。

8. 桁がずれている

| 項目名 | 値 |
|---|-----------|
| A | 1 |

これは問題ありません。 Markdown の表は桁を揃える必要がなく、区切り行のハイフンの数も何本でも構いません。ソースの見た目が汚くても、表示結果は同じです。

AI が出力する表はよく桁がずれていますが、記法上は正しいので直す必要はありません。

9. インデントが4つ以上ある

    | 項目 | 値 |
    | --- | --- |

行頭に半角スペースが4つ以上あると、コードブロックとして解釈されます。表ではなく、そのままの文字が等幅で表示されます。

症状:表が灰色の背景のコードとして表示される。

注意:全角スペースが混ざっている場合も、処理系によっては同様の問題が起きます。

10. そもそも貼り付け先が表に対応していない

Slack、テキストメール、Word、Excel、メモ帳。これらは Markdown の表を解釈しません。記法が正しくても表示されません。

症状:縦棒がそのまま見える。区切り行も1行のデータとして表示される。

これは記法の問題ではないので、貼り付け先に合わせて変換するしかありません。

同じMarkdownレンダラで4つのケースを描画した比較。正しい書き方は表になり、区切り行なし・セル内の縦棒・4つ以上のインデントはそれぞれ違う崩れ方をする
同じレンダラに4通りの書き方を通した結果です。左が書いたMarkdown、右が表示結果。区切り行を落とすと表として認識されず、セル内に縦棒があると列がずれて中身が消え、行頭に空白が4つあるとコードブロックになります。崩れ方が原因ごとに違うので、見た目から逆に原因をたどれます。(描画は処理系によって細部が異なります)

症状から原因を引く早見表

症状 疑う原因
まったく表にならない 1(区切り行なし)、3(全角パイプ)、4(空行なし)、10(非対応)
灰色の背景で表示される 9(インデント)
特定の行だけ列が多い 6(セル内の縦棒)
特定の行だけ列が足りない 7(列数不一致)
行が分裂している 5(セル内改行)
最後の列が消える 2(区切り行の列数)

検証の順番

原因がわからないときは、この順で切り分けると早く見つかります。

  1. 別の処理系に貼ってみる:GitHub の Issue のプレビューや、Markdown 対応のエディタに貼ります。そこで表になるなら、元の貼り付け先が非対応(原因10)です。
  2. 表だけを切り出す:前後の文章を削って表だけにします。これで直るなら原因4(空行)です。
  3. 1行ずつ削る:どの行を消すと直るかで、原因5〜7を特定できます。
  4. 全角文字を検索する:| と全角スペースを検索します。原因3と9が見つかります。

そもそもMarkdownが読める環境にしておく

ここまで原因を10個挙げましたが、いちばん効くのは手元でMarkdownをプレビューできるようにしておくことです。表として認識されているかが一目で分かるので、切り分け作業そのものが要らなくなります。

エンジニアであればVSCodeが入っていることが多く、Ctrl + Shift + V でプレビューが開きます。問題はそれ以外の環境です。Windows標準のメモ帳やテキストエディットでは、Markdownはただの記号の羅列にしか見えません。崩れているのか正しいのかも判断できない状態になります。

Markdown対応のメモ帳アプリを1つ入れておくだけで、AIの出力を扱う効率はかなり変わります。無料のものが多く、導入も数分で済みます。

原因を10個並べておいて言うのもなんですが、これがいちばん早い解決だと思っています。エンジニア以外の人にこそ勧めたい。メモ帳アプリを1つ入れ替えるだけで、この記事の切り分け作業はほとんど不要になります。

AIが出力した表で起きやすいもの

生成AIの表で実際によく遭遇するのは、次の3つです。

原因6(セル内の縦棒):コマンドやコードを表に入れたときに起きます。AI はエスケープを忘れがちです。

原因7(列数不一致):行数が多い表で、途中の行だけ列が足りないことがあります。

原因9(全角スペース):日本語で指示したときに混入します。

これらをまとめて処理したい場合は、このサイトの Markdown変換ツール が使えます。桁のずれ、行頭・行末の縦棒の欠落、列数の不一致を吸収して読み取り、Excel 用のタブ区切り・HTML・はてな記法・プレーンテキストに変換できます。全角スペースの正規化も同時に処理する仕様です。

記法そのものについては「AIの出力を扱うために必要なMarkdown記法だけを10個」に、Excel への貼り付けについては「ChatGPTの表をExcelに貼ると崩れる理由」にまとめています。

まとめ

この記事で使ったツール