マークダウン入門ナビ 
はじめに
マークダウンはテキストだけで文書を構成できる便利な書式です。
その中でも「表（テーブル）」構造はデータを整理したり、見やすくまとめたりする際に重宝します。
しかし、マークダウンのテーブルは「シンプルさ」が制約になるため、初心者は使い方に戸惑いがち。
この記事では、マークダウンでテーブルを作る基本から、応用テクニックまで丁寧に解説します。
「何かを表でまとめたいけど、どう書けばいいの？」という疑問を解消し、実務やブログで即活用できるテーブル作成を目指しましょう。
1. マークダウンテーブルの基本構文
1‑1. 1行目：ヘッダー
テーブルの最初の行は見出し（ヘッダー）として扱われます。
各セルはパイプ | で区切ります。
以下は最小構成の例です。
| 見出し1 | 見出し2 |
|---|---|
| 内容1 | 内容2 |
1‑2. アンダースコア行（区切り線）
ヘッダーと本文を区切るために、ハイフン - で構成された行が必要です。
ハイフンの数はセルの数に合わせて自由に書けますが、1つ以上は必ず入れましょう。
1‑3. 本文行
ヘッダーの後に続く行がテーブルの本体です。
ヘッダーと同じくセルは | で区切ります。
行の先頭と末尾の | は省略可能ですが、揃えて書くと可読性が上がります。
2. セルの幅と見た目を調整する
2‑1. 水平揃え
セル内の文字列を左揃え、右揃え、中央揃えにするには、区切り線のハイフンに :（コロン）を付けます。
| 左揃え | センター | 右揃え |
|---|---|---|
| 例1 | 例2 | 例3 |
-
左揃え：左側にコロン
:--- -
中央揃え：両側にコロン
:---: -
右揃え：右側にコロン
---:
2‑2. 空セルとスペース
セルに文字を入れたくない場合は、空のまま | だけ書きます。
ただし、可読性を保つためにスペースを入れると見栄えが良くなります。
例：
| カラムA | カラムB |
|---|---|
| データ | |
2‑3. 改行（複数行セル）
標準的なマークダウンではセル内に改行を入れることはできません。
しかし、以下のようにHTMLの <br> タグを使うことで複数行表現が可能です。
| 概要 | 詳細 |
|---|---|
| 1行目 | 2行目の<br>続き |
3. テーブルを作る際に役立つコツ集
3‑1. 既存の表をコピペして変換
WordやExcelで作った表を、Markdown Table Generator（例：tableconvert.com）に貼り付ければ、自動でマークダウン表に変換してくれます。
「初心者」でも楽々手順を踏んで済むので、最初はこのツールで慣れましょう。
3‑2. スムーズな列幅調整
行を編集する際、セルの幅がバラバラだと可読性が下がります。
エディタ側で「テーブル整形」機能があれば自動で揃えてくれます。
VS Codeなら拡張機能「Prettier」や「Markdown Table Formatter」で整形できます。
3‑3. 表全体の見出しを付ける
テーブルが長い場合、上部に小さな見出し（#や##）を書いて文脈を示しましょう。
例えば「2024年度商品価格一覧」のように説明書きで補足すると、閲覧者にとって分かりやすいです。
4. よく使う応用表現
4‑1. 複数行セル（行結合）
純粋なMarkdownではセル結合（rowspan / colspan）はサポートされていません。
代替策として、セル内に改行を入れた画像やテキストで擬似的に結合効果を出す方法があります。
| タスク | 状態 | 備考 |
|---|---|---|
| タスクA | 完了 | |
| | | 追記 |
| タスクB | 未着手 | |
4‑2. 番号付きリストとテーブルの組み合わせ
リスト内に表を挿入するときは、インデントを揃えて書くのがコツです。
1. 製品リスト
| 製品 | 価格 |
|---|---|
| A | 1000円 |
| B | 1500円 |
2. 追加情報
...
4‑3. GitHubとGitLabでのサポート状況
- GitHub：マークダウンテーブルをほぼ標準でサポート。
- GitLab：同様に標準サポート。
- Bitbucket：GitHubより若干制限がありますが、基本はOK。
ただし、各プラットフォームでの「プレビュー」の表示速度やレイアウトが微妙に異なる場合があるので、レポート前に確認すると安心です。
5. テーブルを見やすくするデザインの裏技
5‑1. 交互行の背景色
Markdown自体に背景色指定はできないため、GitHubのPRやWikiで「<thead>」や「<tbody>」を使って class="even" などにして、CSSで背景を設定する手法があります。
以下はGitHub Gist の例です。
<table>
<thead>
<tr>
<th>項目</th>
<th>値</th>
</tr>
</thead>
<tbody>
<tr class="even">
<td>CPU</td>
<td>Intel Core i7</td>
</tr>
<tr>
<td>RAM</td>
<td>16GB</td>
</tr>
</tbody>
</table>
5‑2. 文字列を強調
表内の重要箇所は 太字 (**文字**) や 斜体 (*文字*) で強調すると目立ちます。
例：
| パラメーター | 値 |
|---|---|
| **最大スループット** | 120Gbps |
| *推奨温度* | 22℃～28℃ |
5‑3. 列幅を固定（カスタム CSS）
ブログやWikiで独自 CSS を適用できる場合は、<style>タグで列幅をピクセル単位に指定すると、レイアウトが安定します。
<style>
th, td { width: 150px; }
</style>
<table>
...
</table>
6. よくあるトラブルと対策
| トラブル | 原因 | 回避策 |
|---|---|---|
| テーブルが崩れる | 行の ` | ` が揃っていない |
| 空セルが表示されない | 末尾の ` | ` を省略した |
| 行番号がズレる | コードブロック内でインデントが違う | コードブロック外に書くか、統一したインデント幅に |
| 改行が無効 | 標準 Markdown ではセル内改行不可 | <br> を挿入するか、別のセルに分割 |
| 見た目がテキストレイアウトのまま | CSS が無効/無い | Markdown をサポートするプラットフォームでチェック |
7. まとめ：初心者でも安心のマークダウン表作成手順
- ヘッダー行：|見出し|見出し|…| で書く
- 区切り線：|—|—|…| でセル数分書く
- 本文行：同形式でデータを入力
-
揃え：必要に応じて
:を付ける - 空セル：スペースを入れて可読性を保つ
- プレビュー：GitHub / GitLab で確認し、崩れを修正
-
応用：<br>や
<style>を使って見せ方を工夫
これらを押さえておけば、数行から数十行の表でも「分かりやすく」「見やすく」作成できます。
ぜひこの記事のコツを実践し、日常のレポートやブログに活かしてみてください。