ビューアーで試す →

Markdownの表（テーブル）の書き方
寄せ・セル内改行・結合まで解説

Markdown（マークダウン）の表は、|（パイプ）と -（ハイフン）だけで作れますが、「列がズレて崩れる」「セルの中で改行できない」「セルを結合したい」など、つまずきポイントも多い記法です。このページでは、表の基本から応用・トラブル解決までを表示例つきでまとめました。書きながら確認したいときは無料のMarkdownビューアーに貼り付ければ、その場で表をプレビューできます。

表の基本の書き方

Markdownの表は3つの要素でできています。1行目がヘッダー行、2行目が区切り行（--- を並べる）、3行目以降がデータ行です。列は | で区切ります。

書き方
| 名前 | 担当 | 状態 |
| --- | --- | --- |
| 佐藤 | デザイン | 完了 |
| 鈴木 | 実装 | 作業中 |
表示結果
名前担当状態
佐藤デザイン完了
鈴木実装作業中
区切り行の --- はハイフン3つが基本ですが、実際は1つ以上あれば動くツールが大半です。またソース上で列幅を揃える必要はなく、|a|b| のように詰めて書いても正しく表示されます。

左寄せ・中央寄せ・右寄せ（文字揃え）

区切り行に :（コロン）を付けると、列ごとに文字揃えを指定できます。数値の列を右寄せにすると、桁が揃って読みやすくなります。

書き方意味
:---左寄せ（デフォルト）
:---:中央寄せ
---:右寄せ
書き方
| 項目 | 単価 | 数量 |
| :--- | ---: | ---: |
| ノート | 220円 | 3 |
| ペン | 1,080円 | 12 |
表示結果
項目単価数量
ノート220円3
ペン1,080円12

セル内の装飾（太字・コード・リンク）

セルの中では、太字・斜体・インラインコード・リンクなどのインライン記法がそのまま使えます。

書き方
| 機能 | 記法 |
| --- | --- |
| **重要** | `**太字**` |
| [公式サイト](https://markdown-viewer.net/) | `[名前](URL)` |
表示結果
機能記法
重要**太字**
公式サイト[名前](URL)

セルの中で改行する方法

Markdownの表では、セル内で通常の改行はできません（改行すると行が分かれて表が崩れます）。セル内で改行したいときは、HTMLの <br> タグを使います。

書き方
| プラン | 内容 |
| --- | --- |
| 無料 | プレビュー<br>CSS出力 |
| なし | すべて無料です |
表示結果
プラン内容
無料プレビュー
CSS出力
なしすべて無料です
改行の基本ルール（スペース2つ・空行・<br> の使い分け）はMarkdownで改行できない時の対処法で詳しく解説しています。

セルの中で「|」を使う方法

| は列の区切り記号なので、セルの中でそのまま書くと列がズレます。文字として表示したいときは \| のようにバックスラッシュでエスケープします。

書き方
| コマンド | 意味 |
| --- | --- |
| A \| B | AまたはB |
表示結果
コマンド意味
A | BAまたはB

セル結合はできる？（代替方法）

結論から言うと、標準のMarkdownにセル結合（rowspan / colspan）の記法はありません。セル結合が必要な表は、次のいずれかで対応します。

  1. 表の構成を見直す: 結合が必要になる表は列の設計を変えると解消できることが多いです（例: 結合したい項目を1列目に繰り返し書く）。
  2. HTMLで表を書く: Markdownの中にHTMLの <table> をそのまま書けるツールが多く、rowspan / colspan が使えます。
書き方（HTMLで結合）
<table>
  <tr>
    <th rowspan="2">チーム</th>
    <td>佐藤</td>
  </tr>
  <tr>
    <td>鈴木</td>
  </tr>
</table>
表示結果
チーム佐藤
鈴木
HTMLが使えるかどうかはサービスによって異なります（GitHubやQiitaは可、Notionは不可など）。貼り付け先の仕様を確認してください。

Excel・スプレッドシートから表を作る

ExcelやGoogleスプレッドシートの表をMarkdownにしたいときは、手で書き直すよりも次の手順が確実です。

  1. スプレッドシート側でセル範囲をコピーする
  2. 変換ツールやエディタの拡張機能（VS Codeの「Markdown Table」系拡張など）でMarkdown表に変換する
  3. 変換結果をMarkdownビューアーに貼り付けて、崩れていないか確認する

逆に、Markdownの表をきれいなHTMLとしてブログに貼りたい場合は、Markdown Viewerで表を含む文書をプレビューし、「HTMLコピー」ボタンを使えばそのまま持ち出せます。

表が崩れる・表示されない原因と直し方

「表がただのテキストのまま表示される」「列がズレる」場合、原因はほぼ次のどれかです。

症状原因直し方
表として認識されない2行目の区切り行（| --- | --- |）がない・列数が合っていないヘッダーと同じ列数の区切り行を入れる
表の直前の文章とくっついて崩れる表の前に空行がない表の前後に空行を1行入れる
列がズレるセル内の | がエスケープされていない\| に置き換える
行が分裂するセル内で改行している<br> に置き換える
特定のサービスでだけ表示されないそのサービスが表記法（GFM）に非対応HTMLの<table>で書く
表はMarkdownの中でも特に「書いてみないとわからない」記法です。リアルタイムプレビューできるビューアーで確認しながら書くと、崩れの原因をすぐ特定できます。

表を書きながら、その場で確認しませんか？
コピペするだけでプレビュー。完成した表はHTML/CSSとしてコピーしてブログにも使えます。

無料のMarkdownビューアーを開く

よくある質問

表のセルの背景色や罫線の色は変えられますか？

Markdownの記法だけでは変えられません。表示側のCSSで指定します。Markdown Viewerではプレビューのスタイルを調整して、そのままCSSをコピーできます。

表の中に画像は入れられますか？

はい。セル内に ![代替テキスト](画像URL) を書けば画像を表示できます。詳しくはリンク・画像の書き方をご覧ください。

スマホで見ると表がはみ出します

列数が多い表は、表を横スクロール可能なコンテナ（overflow-x: auto を指定した div）で囲むのが定番の対処法です。ブログのテーマ側のCSSで対応します。

関連ガイド