Markdown 表ジェネレーター
マス目を埋めて配置ボタンを押すだけで、整ったMarkdownの表をコピーできます。データはアップロードされず、エディタはすべてブラウザ内で動作します。
Markdownで表を作るには？
Markdownの表は縦線（|）とハイフンの区切り行で作ります。1行目に縦線で区切った見出しセルを書き、2行目にハイフンだけの区切り行を置き、3行目以降は1行につき1件のデータを書きます。区切り行にコロンを入れると列ごとの配置を指定できます。GitHubやObsidianなど主要な環境ではそのまま表として表示されます。
| 名前 | 役割 | コミット数 |
| :---- | :--------: | ---------: |
| Ada | エンジニア | 128 |
| Grace | メンテナー | 64 |3列の表になり、名前は左揃え、役割は中央揃え、コミット数は右揃えで表示されます。1行目は見出し行として太字になります。
Markdown 表ジェネレーターを使う
表エディタ
プレビュー
| Markdownツール | 説明 | 難易度 | 主な用途 |
|---|---|---|---|
| Markdown表ジェネレーター | 表を作成して調整する | 中 | ドキュメント、データ整理 |
| Markdownプレビュー | その場で表示を確認 | 低 | 文章作成 |
| MarkdownをHTMLに変換 | MarkdownをHTMLへ変換 | 中 | Web公開 |
| Markdownチートシート | 記法をすばやく確認 | 低 | 学習 |
生成されたMarkdownの表
Markdownの表の書き方
表はもともとのMarkdown仕様ではなく、GitHub Flavored Markdownの拡張です。そのため他の記法よりルールが厳格で、見出し行とその下の区切り行はどちらも省略できません。さらに、どの行も見出しと同じ列数である必要があります。
表の基本構造
縦線が列の区切りになり、ハイフンを3つ以上並べた区切り行が1行目を見出しに変えます。ハイフンの長さを上のセルに合わせる必要はありません。レンダラーは列数しか見ないため、ソースが揃っていなくても表示は整います。
| パッケージ | バージョン | 状態 |
| --- | --- | --- |
| next | 16.0.1 | 安定版 |
| react | 19.2.0 | 安定版 |「パッケージ」「バージョン」「状態」を太字の見出しとする3列の表になり、その下に2行のデータが並びます。
コロンで列の配置を指定する
区切り行に入れたコロンが各列の配置を決めます。左揃えが既定値なので :--- と --- の結果は同じで、中央揃えと右揃えのときだけコロンを足します。数値の列は右揃えにするのが慣例です。
| 商品 | 数量 | 価格 |
| :--------- | :--: | -----: |
| キーボード | 2 | 89.00 |
| モニター | 1 | 249.50 |「商品」は左揃え、「数量」は中央揃え、「価格」は右揃えになり、小数点の位置が列の中で揃います。
セル内の縦線をエスケープする
セルの中に縦線をそのまま書くと、そこで列が分かれてしまいます。バックスラッシュでエスケープしてください。インラインコードの中ではバックスラッシュのエスケープが処理されないため、HTML実体参照の | を使います。
| コマンド | 意味 |
| --- | --- |
| a \| b | a または b |
| `grep x | wc -l` | 一致した行を数える |どちらの行も2列のまま保たれ、縦線は列を増やさずに文字としてセルの中に表示されます。
セル内の装飾と改行
セルの中ではインライン記法が使えます。太字、斜体、リンク、画像、インラインコードはいずれも有効です。ブロック要素は使えないため、セル内で改行したいときは<br>タグを入れます。
| オプション | 説明 |
| --- | --- |
| `--watch` | **推奨。**<br>保存のたびに再ビルドします。 |
| `--quiet` | 進捗の出力を隠します。 |1つ目の「説明」セルは太字の下にもう1行が表示され、オプション名はインラインコードとして表示されます。
見出しのない表
GitHub Flavored Markdownでは見出し行と区切り行を省略できませんが、見出しセルの中身は空のままにできます。ラベル付きのデータではなく、レイアウト目的の格子として表を使うときの書き方です。
| | |
| ----- | ---------- |
| Ada | エンジニア |
| Grace | コンパイラ |2列の表になり、2行のデータの上に空白の見出し帯が残ります。多くのレンダラーは見出し行の高さをそのまま確保します。
HTMLでセルを結合する
Markdownの表にrowspanやcolspanはありません。どうしてもセルの結合が必要な場合は、HTMLの表を文書に直接書きます。GitHub、GitLab、主要な静的サイトジェネレーターはMarkdownファイル内のHTMLをそのまま表示します。
<table>
<tr><th colspan="2">実行環境</th></tr>
<tr><td>Node</td><td>22.x</td></tr>
<tr><td>pnpm</td><td>10.x</td></tr>
</table>2列にまたがる見出しセルが1つでき、その下は通常の2列の行になります。HTMLブロックの内側ではMarkdownの記法は処理されません。
各サービスでの表示状況
表の記法はCommonMarkではなくGitHub Flavored Markdownに属するため、開発者向けのサービスではよく対応している一方で、チャットアプリではほとんど使えません。
| プラットフォーム | 対応状況 | 備考 |
|---|---|---|
| GitHub / GitLab | 対応 | README、Issue、Pull Request、Wiki、リリースノートで表示され、3種類の配置指定も使えます。 |
| Qiita / Zenn | 対応 | どちらもGFMの表に対応しており、生成した記法をそのまま記事に貼り付けられます。 |
| Obsidian | 対応 | GFMの表を表示でき、配置指定を保ったまま編集できるテーブルエディタも内蔵しています。 |
| VS Code | 対応 | 標準のMarkdownプレビューで表示されます。整形用の拡張機能を入れるとソースの縦線も揃います。 |
| Notion | 一部 | 表の記法を貼り付けるとNotionのテーブルに変換され、縦線はテキストとしては残りません。 |
| Discord | 非対応 | メッセージ内では表になりません。コードブロックで囲めば列の位置だけは揃います。 |
| Slack | 非対応 | 表の記法自体がありません。コードブロック、スニペット、画像のいずれかで共有してください。 |
このツールでMarkdownの表を作る手順
表のサイズを決める
必要な行数と列数を入力して「適用」を押します。表を大きくする場合、すでに入力したセルの内容はそのまま残ります。
セルを入力する
グリッドに直接入力します。一番上の行が見出し行になり、公開後は太字で表示されます。
列の配置を選ぶ
各見出しセルの下にある 左 / 中 / 右 のボタンで、その列を左揃え・中央揃え・右揃えに切り替えます。区切り行はクリックと同時に更新されます。
必要ならソースを直接編集する
コードエディタに切り替えると、既存の表を貼り付けたり記法を手で調整したりできます。編集内容はそのままビジュアルエディタに反映されます。
コピーまたは書き出す
生成されたMarkdownをクリップボードにコピーするか、.mdファイルとして書き出してREADMEにそのまま貼り付けます。
よくある質問
Markdownの表の書き方は？
縦線で区切って見出しセルを書き、その下にハイフンの区切り行を置き、以降は1行につき1件ずつデータを書きます。最小の例は、1行目が | 名前 | 役割 |、2行目が | --- | --- |、3行目が | Ada | エンジニア | です。上のジェネレーターを使えば、この形を自動で組み立てられます。
Markdownの表を中央揃えや右揃えにするには？
区切り行にコロンを足します。:--- が左揃え、:---: が中央揃え、---: が右揃えです。左揃えが既定値なので、--- と :--- の表示結果は同じになります。配置は列単位の指定で、見出しセルとその列のすべてのデータセルに適用されます。
GitHubのREADMEで表は使えますか？
使えます。表はGitHub Flavored Markdownの一部で、READMEやIssue、Pull Request、Discussions、Wiki、リリースノートで表示されます。3種類の列配置に対応しており、セルの中では太字やリンク、インラインコードなどのインライン記法も使えます。
Markdownの表を見出しなしで作れますか？
標準のGitHub Flavored Markdownでは作れません。見出し行と区切り行はどちらも必須です。よく使われる回避策は見出しセルを空にする方法で、データの上に空白の帯が残ります。完全に見出しのない格子が必要な場合はHTMLの表を使ってください。
Markdownの表でセルを結合できますか？
できません。Markdownの表にはrowspanやcolspanに相当する書き方がなく、どの行も同じ列数にする必要があります。結合が必要なときはcolspanやrowspan属性を付けたHTMLの表を書きます。GitHubや主要な静的サイトジェネレーターは、Markdownファイルの中でもそれを表示します。
CSVをMarkdownの表に変換するには？
コードエディタに切り替えてCSVを貼り付け、カンマを縦線に置き換えて、1行目の下にハイフンの行を挿入します。プレビューは入力に合わせて更新されるため、区切りを間違えた行はすぐに分かります。インポートボタンから既存の.mdや.txtファイルを読み込むこともできます。
Markdownの表をExcelに貼り付けるには？
間接的な方法なら可能です。縦線をカンマに置き換え、ハイフンの行を削除して.csvとして保存すると、ExcelやGoogleスプレッドシートでそのまま開けます。ブラウザのプレビューで表示された表を選択してコピーし、表計算ソフトに貼り付けても列の構造は保たれます。
SlackやDiscordでMarkdownの表は使えますか？
どちらも表としては表示しません。Slackには表の記法自体がなく、Discordもメッセージ内の縦線の表を無視します。定番の回避策は、バッククォート3つのコードブロックで囲んで等幅フォントで列を揃える方法か、スクリーンショットを共有する方法です。
Markdownで目次を作るには？
見出しごとにリンクを1つ書き、リンク先をその見出しのアンカーにします。たとえば「インストール」という項目から #インストール へリンクします。GitHubは見出しの文字を小文字にし、空白をハイフンに置き換えたアンカーを自動で作ります。枠付きで見せたい場合は1列の表を使う手もあります。
Markdownの表が反映されないのはなぜですか？
よくある原因は3つです。見出しの下にハイフンの区切り行がない、見出しと列数の違う行がある、段落のすぐ後ろに表を書いていて間に空行がない、のいずれかです。セルの中のエスケープしていない縦線も、その行を余計な列に分けてしまいます。