Markdownの表が崩れる原因と、崩さずに書くコツ

Markdownのコラム

Markdownの表が崩れるとき、原因はだいたい3つに絞れます。
区切り行、セル内の記号、セル内の改行です。

そもそも表として認識される条件

Markdownの表には、ヘッダー行の下に区切り行が要ります。

| 項目 | 内容 |
| --- | --- |
| A | あ |

2行目の | --- | --- | が無いと表として扱われず、書いた文字列がそのまま出ます。
「表にならない」という症状のときは、まずここを疑うのが早いです。

区切り行のハイフンは3つでなくても構いません。
ただし列の数はヘッダー行と一致している必要があります。
ヘッダーが3列で区切り行が2列だと、表になりません。

表の直前に空行を置いておくのも安全です。
前の段落と地続きになっていると、表として解釈されないことがあります。

セル内のパイプは書けない

セルの中に | をそのまま書くと、そこが列の区切りとして扱われます。
3列のつもりが4列になり、行ごとに列数がずれて崩れます。

回避するにはバックスラッシュでエスケープします。

| 記法 | 意味 |
| --- | --- |
| a \| b | aまたはb |

コードとして書きたい場合は、バッククォートで囲んでもエスケープが要ります。
`a|b` のように囲んだだけでは、パイプは区切りとして解釈されます。

セル内で改行はできない

Markdownの表は1行1レコードの構造なので、セルの中で改行すると、そこで行が終わったことになります。

どうしても改行を入れたい場合は <br> を書きます。
HTMLを許可している処理系であれば、これで同じセルの中に改行が入ります。

ただし、セル内に改行を入れたくなった時点で、その内容は表に向いていないことが多いです。
表の外に箇条書きで出したほうが読みやすくなる場合があります。

ソースの見た目が揃わないのは問題ない

日本語で表を書くと、全角文字と半角文字の幅が違うため、エディタ上で縦の線が揃いません。

| 名前 | 説明 |
| --- | --- |
| あ | 短い |
| ながいなまえ | 説明文がここに入る |

これは見た目の話だけで、変換結果には影響しません。
揃えるためにスペースを足しても、セルの前後の空白は無視されます。

とはいえ、揃っていないソースは自分が読むときに間違えやすくなります。
列を足したり消したりする作業が多い表なら、揃えておいたほうが結果的に早いところはあります。

迷ったら列を減らす

崩れる表は、たいてい列が多すぎます。
1行が長くなるほどパイプの数を数え間違えますし、セル内に改行を入れたくなるのも列が足りていない裏返しです。

表で持たせるのは項目名と短い値まで、と決めておくと崩れにくくなります。

そもそも手で書かない、という手もあります。
表計算ソフトで組んだ表をコピーして貼り付ければ、Markdownの表に変換できます。列が多い表や、数字の集計が要る表はそのほうが早いです。

Markdown表 相互変換で変換できます。表の記法そのものについてはMarkdownの表の書き方に詳しくまとまっています。

ブラウザだけで動くMarkdownエディタ

LiteMDは入力したテキストを外部に送信しません。読み込みも変換もプレビューも、すべてブラウザの中で完結します。

エディタを開く