Markdown表のセル結合（縦・横結合）と書き方
改行・崩れ防止完全ガイド

最終更新：2026年10月2日

Markdown（マークダウン）の表は、|（パイプ）と -（ハイフン）だけで作れますが、「列がズレて崩れる」「セルの中で改行できない」「セルを縦・横に結合したい」など、つまずきポイントも多い記法です。このページでは、表の基本から応用・セル結合（HTML代替）・トラブル解決までをコピペ可能な実例付きでまとめました。書きながら確認したいときは、各サンプルの「🚀 ビューアーで試す」ボタンを押せば、その場で表をプレビューできます。

表の基本の書き方

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

| 名前 | 担当 | 状態 |
| --- | --- | --- |
| 佐藤 | デザイン | 完了 |
| 鈴木 | 実装 | 作業中 |

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

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

| 項目 | 単価 | 数量 |
| :--- | ---: | ---: |
| ノート | 220円 | 3 |
| ペン | 1,080円 | 12 |

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

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

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

セルの中で改行する方法

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

| プラン | 内容 |
| --- | --- |
| 無料 | プレビュー<br>CSS出力 |
| なし | すべて無料です |

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

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

| コマンド | 意味 |
| --- | --- |
| A \| B | AまたはB |

セル結合の書き方（縦結合・横結合・HTML代替タグ）

結論から言うと、標準のMarkdown（CommonMark / GFM）にセル結合（rowspan / colspan）を行う専用記法は存在しません。しかし、Markdown文章内ではHTMLの <table> タグを直接記述することが許可されているため、HTMLタグを使用すれば縦結合・横結合を自由に実現できます。

1. 縦結合（rowspan）のコピペ用コード

同じ分類やカテゴリを縦に2行以上まとめたいときは、結合元のセルに rowspan="行数" を指定し、結合される下の行ではその列のセル（<td>）を省略します。

<table>
  <thead>
    <tr><th>部署</th><th>役職</th><th>氏名</th></tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">開発部</td>
      <td>リーダー</td>
      <td>田中</td>
    </tr>
    <tr>
      <td>エンジニア</td>
      <td>佐藤</td>
    </tr>
  </tbody>
</table>

2. 横結合（colspan）のコピペ用コード

列をまたいで左右にセルを結合したいときは、結合元のセルに colspan="列数" を指定します。ヘッダーのグループ分けや、合計行でよく使われます。

<table>
  <thead>
    <tr>
      <th colspan="2">品名・詳細</th>
      <th>金額</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>プレミアムプラン</td>
      <td>年払い一括</td>
      <td>12,000円</td>
    </tr>
    <tr>
      <td colspan="2"><strong>合計</strong></td>
      <td><strong>12,000円</strong></td>
    </tr>
  </tbody>
</table>

3. HTMLを使わずにMarkdown記法だけで見やすくする代替案

HTMLタグの混入を避けたい場合や、NotionなどHTMLタグの直接記述に対応していない環境では、次のように「1列目の項目を愚直に繰り返す」か、同値記号（「〃」や「-」）を使うのが実務上のベストプラクティスです。

| 部署 | 役職 | 氏名 |
| --- | --- | --- |
| 開発部 | リーダー | 田中 |
| 開発部 | エンジニア | 佐藤 |
| 営業部 | マネージャー | 鈴木 |

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

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

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

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

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

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

よくある質問

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

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

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

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

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

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

関連ガイド

• 表の幅・列幅を調整する方法 — CSSでの指定とGitHubでの代替テク
• ExcelやWordの表をMarkdownに変換する方法
• Markdown記法一覧【チートシート】 — 全記法の書き方まとめ
• Markdownで改行できない・されない時の対処法
• Markdownのリンク・画像の書き方