Markdownで表(テーブル)を書いたのに、「プレビューで表にならず生の記号がそのまま表示される」「列の位置がズレてレイアウトが崩れてしまう」といったトラブルに直面したことはありませんか?
Markdownの表組みは手軽な反面、少しのスペースや改行の有無でレンダラーが認識できなくなる繊細な仕様を持っています。
この記事では、Markdownの表が崩れる代表的な5つの原因と、すぐに直せる解決策を具体例付きで詳しく解説します。
原因1:テーブル前後の空行が抜けている
最も多い原因がこれです。文章の直後に空行を挟まずテーブルを書くと、レンダラーが表ではなく段落の続きと認識してしまいます。
以下は料金プランの一覧です。
| プラン | 料金 |
| --- | --- |
| 基本 | 無料 |
以下は料金プランの一覧です。
| プラン | 料金 |
| --- | --- |
| 基本 | 無料 |
原因2:セル内の「|」(パイプ)がエスケープされていない
セル内のテキストに | をそのまま書くと、新しい列区切りと誤認されて列数が合わなくなります。必ず \| とバックスラッシュを付けてエスケープしてください。
原因3:区切り行(2行目)のハイフン不足・構文ミス
テーブル認識にはヘッダー直下にハイフン3つ以上(| --- | --- |)の区切り行が必須です。ハイフンが足りなかったり、アンダースコア(_)を使っていると表として展開されません。
原因4:各行の列数(パイプの数)が一致していない
ヘッダーが3列あるのにデータ行が2列しかない場合、表示が崩れたり空白セルが意図しない位置に生成されます。空セルでも | | のようにパイプを記述しましょう。
原因5:セル内改行でEnterを押している
セルの中で普通にEnterキーで改行すると、テーブル行が分断されてしまいます。セル内改行は <br> タグを使いましょう。