ぱんだツールズぱんだツールズ

技術背景

Markdownテーブルの書き方 — パイプ記法とHTML・CSV変換までの完全ガイド

約6分

GitHubのREADMEに表を追加しようとして、パイプ(|)の数を数えながら手打ちしていたら、 プレビューで見事に列がズレていた——という経験はないでしょうか。 列を1つ増やしただけで見出し行・区切り行・データ行すべてを直す羽目になり、直したつもりがまた1文字足りない。 Markdownのテーブルは記法自体はシンプルなのに、手作業だと驚くほど崩れやすい記法です。

この記事ではMarkdownテーブルのパイプ記法・列揃えの指定方法・崩れる原因と対処法を解説し、 さらにHTML・CSVといった別形式への変換が必要になる場面まで紹介します。

Markdownテーブルの基本構文(パイプ記法)

Markdownのテーブルは、標準のMarkdown仕様には含まれておらず、GFM(GitHub Flavored Markdown)と呼ばれる拡張仕様で定義されています。 現在ではGitHub・GitLab・Zenn・Qiita・Notion・VS Codeのプレビュー機能など、ほとんどの主要サービスがこの記法に対応しています。

書き方はシンプルで、パイプ記号(|)で列を区切った「見出し行」と、その直下に置く「区切り行」の2行が最低限必要です。

| 商品名 | 価格 | 在庫 |

| --- | --- | --- |

| りんご | 120円 | ◯ |

| みかん | 80円 | ✕ |

1行目が見出し行、2行目が区切り行(各セルに最低1文字のハイフンが必要。実務上は---のように3つ以上が定番)、 3行目以降がデータ行です。行頭・行末のパイプは省略できるパーサーもありますが、崩れを防ぐために付けておくのが安全です。

列の配置を指定する(左寄せ・中央寄せ・右寄せ)

区切り行のハイフンにコロン(:)を付けることで、列ごとに文字の揃え方を指定できます。

| 項目 | 数量 | 単価 |

| :--- | :---: | ---: |

| ノート | 3 | 150円 |

| ペン | 10 | 80円 |

  • :--- — 左寄せ(コロンなしの---も同じく左寄せになる)
  • :---: — 中央寄せ(両端にコロン)
  • ---: — 右寄せ(右端だけにコロン)

金額・件数・パーセンテージなど数値を扱う列は右寄せにすると桁が揃い、一覧性が上がります。 文字列の項目名の列は左寄せ、短いラベルや記号(◯・✕など)は中央寄せにすると見やすくなります。

テーブルが崩れる・ズレるよくある失敗パターン

Markdownテーブルは記法自体はシンプルですが、次のようなミスで崩れることがよくあります。

1. 見出し行と区切り行の列数が合っていない

列を後から追加・削除したときに区切り行の更新を忘れると、列数が一致せずテーブルとして認識されないか、レンダリングが崩れます。 見出し行・区切り行・すべてのデータ行の列数は常に一致させる必要があります。

2. セル内のパイプ記号がエスケープされていない

セルの中に|をそのまま書くと列の区切りと誤認識されます。使う場合は\|のようにバックスラッシュでエスケープします。

3. テーブルの前後に空行がない

一部のパーサー(特にブログの記事管理システム(CMS)や一部のドキュメントツール)は、テーブルの直前に空行がないと通常の段落として扱ってしまうことがあります。 テーブルの前後には1行空けておくと安全です。

4. エディタ上の見た目のズレを気にしすぎる

日本語のような全角文字が混ざると、テキストエディタ上ではパイプの位置が縦に揃わず気になりますが、これは見た目だけの問題でレンダリング結果には影響しません。 ソースコード上の整列にこだわりすぎず、区切り行のハイフン数とコロンの位置が正しいかを優先して確認しましょう。

手打ちが面倒な理由 — 列数が増えるほど破綻しやすい

2〜3列程度の小さな表なら手打ちでも問題ありませんが、列数・行数が増えるとパイプの数を数えるだけで一苦労です。 例えば6列×10行の表を手で書くと、パイプは1行あたり7個、区切り行だけでもハイフンとコロンの組み合わせを6箇所分そろえる必要があります。 途中で1列追加すると、見出し行・区切り行・全10行のデータ行、合計12行すべてに手を入れることになり、ミスが起きやすくなります。

ぱんだツールズのMarkdownテーブル生成ツールを使うと、行数・列数を数値で指定してフォームにデータを入力するだけで済みます。 パイプの数や区切り行のハイフンは自動的にそろい、列の配置もボタンで切り替えられるため、コロンの位置を手で数える必要もありません。

HTML・CSV形式への変換が必要になる場面

Markdownテーブルはそのまま使えない場面もあります。代表的なのが次の2つのケースです。

ブログエディタがMarkdownに対応していない場合

WordPressのクラシックエディタや一部のメルマガ配信ツール・社内CMSは、Markdown記法を入力してもテーブルとして描画されません。 パイプ(|)やハイフン(-)が文字通りそのまま表示されてしまいます。 こうした環境では、あらかじめ<table>タグを含むHTML形式に変換してから貼り付ける必要があります。 文書全体をまとめて変換したい場合はMarkdown→HTML変換ツールが便利です。

Excel・スプレッドシートにデータとして取り込みたい場合

ドキュメント用に作った表のデータを、そのまま集計や共有のためにExcelやGoogleスプレッドシートへ持ち込みたいこともあります。 この場合はMarkdownテーブルをCSV形式で出力すればそのまま読み込めます。 さらにCSVをシステム連携用にJSON形式へ変換したい場合はCSV↔JSON変換ツールを使うと、追加の手打ち作業なしで変換できます。 ぱんだツールズのMarkdownテーブル生成ツールはMarkdown・HTML・CSVの3形式をタブ切り替えで同時出力できます。 用途が変わるたびに、別のツールへコピー&ペーストし直す手間がありません。

まとめ

  • Markdownテーブルはパイプ(|)で区切った見出し行と、直下の区切り行(---)の2行が基本構造
  • 列の配置は区切り行のコロンで指定する。左寄せ:---・中央:---:・右寄せ---:
  • 崩れる主な原因は「列数の不一致」「パイプの未エスケープ」「前後の空行不足」。エディタ上の見た目のズレ自体は気にしなくてよい
  • 列数・行数が増えるほど手打ちは破綻しやすく、Markdownテーブル生成ツールで自動生成する方が確実
  • Markdown非対応のエディタにはHTML、Excel・スプレッドシートへの取り込みにはCSVと、用途に応じて出力形式を選べる

よくある質問

Markdownテーブルの区切り行(---)は何のためにありますか?

区切り行はヘッダー行とデータ行の境界を示すための行で、GFM(GitHub Flavored Markdown)のテーブル記法では必須です。各セルに最低1文字のハイフン(-)が必要で、実務上は視認性のために3つ以上(---)を使うのが定番です。区切り行がないと、パイプ(|)で区切られた行が単なるテキストとして扱われ、テーブルとして描画されません。

列の配置(左寄せ・中央寄せ・右寄せ)はどうやって指定しますか?

区切り行のハイフンにコロン(:)を付けて指定します。左寄せは`:---`(コロンなしの`---`も同じく左寄せ)、中央寄せは`:---:`のように両端にコロン、右寄せは`---:`のように右端だけにコロンを付けます。数値を扱う列(金額・件数など)は右寄せにすると桁が揃って読みやすくなります。

見出し行と区切り行の列数が合っていないとどうなりますか?

パーサーによって挙動が異なりますが、多くの場合はテーブルとして認識されずに崩れた表示になるか、列数が少ない方に合わせて余った列が無視されます。例えば見出し行が4列なのに区切り行が3列しかないと、GitHubのプレビューでは表全体が正しくレンダリングされないことがあります。列を追加・削除したときは、見出し行・区切り行・データ行すべての列数を揃える必要があります。

Markdownテーブルと箇条書き、どちらを使うべきですか?

比較する項目が2つ以下ならシンプルな箇条書きで十分です。3項目以上のデータを複数の観点(列)で比較する場合はテーブルが適しています。例えば「料金プラン×機能一覧」のように行と列の両方に意味がある情報は、テーブルにすることで一覧性が大きく上がります。逆に単純な手順の羅列にテーブルを使うと、かえって読みにくくなります。

セルの中にパイプ記号(|)や改行を入れることはできますか?

パイプ記号は`\|`のようにバックスラッシュでエスケープすれば1つのセル内に含められます。エスケープしないと列の区切りと誤認識され、テーブルが崩れます。改行については標準のMarkdownテーブルはセル内の改行に対応していないため、`<br>`タグを挿入するか、内容を短くまとめる必要があります。

GitHubのREADMEとZenn・Qiitaでテーブルの書き方は違いますか?

基本的なパイプ記法・区切り行の書き方は共通です。GitHub・Zenn・Qiita・GitLab・Notionなどはいずれも GFM(GitHub Flavored Markdown)のテーブル拡張をベースにしているため、同じMarkdownをコピーすればほぼそのまま通用します。ただし列幅の自動調整やセル内Markdown(太字・リンクなど)の扱いにはサービスごとの細かな差があるため、投稿前にプレビューで確認するのが安全です。

テーブルの内容はブラウザの外に送信されますか?

いいえ。ぱんだツールズのMarkdownテーブル生成ツールは入力したセルの内容をブラウザ内のJavaScriptだけで処理し、サーバーには一切送信しません。社外秘の仕様書や未公開の料金表など、外部に出したくないデータを含む表を作る場合でも安心して利用できます。

MarkdownテーブルをHTMLやCSVに変換する必要があるのはどんなときですか?

ブログエディタがMarkdownに対応していない場合(WordPressのクラシックエディタやメルマガ配信ツールなど)はHTML形式が必要です。逆に、下書きとして作った表のデータをExcelやGoogleスプレッドシートに持ち込みたい場合はCSV形式が便利です。ぱんだツールズのMarkdownテーブル生成ツールはMarkdown・HTML・CSVをタブ切り替えで同時に出力できるため、用途ごとに変換し直す手間がありません。

この記事で紹介したツール

次に読む