Markdownで表を作るには:構文、配置、セル内の改行。

Markdownの表はプレーンテキストです。セルをパイプで区切り、見出しの下にハイフンの行を置きます。ここでは構文と列の揃え方、そしてセルにパイプや2行目を入れる方法を説明します。

macOS 14以降。閲覧は無料で、編集とレビューは1回のお支払いです。

要点

見出し行を書き、次にハイフンの区切り行、そのあとに1行につき1行分のデータを、セルの間に|を入れて書きます。区切り行のコロンで列の配置が決まります。:---は左揃え、:---:は中央揃え、---:は右揃えです。セル内にパイプを表示するには\|と書き、セル内で改行するには<br>と書きます。

| Plan | Price | Seats |
|:-----|------:|:-----:|
| Free |    $0 |   1   |
| Team |   $12 |  10   |

·

Markdownの表の基本構文

表はGitHub Flavored Markdown(GFM)の機能で、GitHub、GitLab、ほとんどのMarkdownアプリが採用しています。表に必要なものは3つです。

  1. 見出し行

    列の名前をパイプで区切って書きます:| Name | Role |。

  2. 区切り行

    見出しのすぐ下に、列ごとにハイフンのまとまりを並べた行を置きます:| --- | --- |。セルの数が見出しと同じでないと、表にならずただのテキストのままになります。

  3. データ行

    1行が表の1行です。セルはパイプで区切ります。セルが足りない行は空のセルで埋められ、多い分は切り捨てられます。表は最初の空行で終わります。

| Name  | Role     |
| ----- | -------- |
| Alice | Designer |
| Bob   | Engineer |

読み手には次のように見えます。

NameRole
AliceDesigner
BobEngineer

各行の先頭と末尾のパイプは省略できますが、あるほうが読みやすくなります。ソースで列を揃える必要はありません。上の余白は人が読むためだけのものです。セルには太字、斜体、コード、リンク、画像を入れられます。

Markdownの表の配置

列のハイフンの左端、右端、または両端にコロンを付けます。

区切り行配置
:---左揃え
:---:中央揃え
---:右揃え
---指定なし(多くのアプリで左揃え)
| Item   | Qty | Price |
|:-------|:---:|------:|
| Pencil |  12 |  $1.50 |
| Ruler  |   3 |  $4.00 |
ItemQtyPrice
Pencil12$1.50
Ruler3$4.00

配置は見出しを含む列全体に適用されます。設定は区切り行で1回だけ行い、セルごとには指定しません。数字は右揃えにすると桁がそろいます。

セル内のパイプと改行

パイプはセルの終わりを意味するので、文字としてのパイプにはバックスラッシュが必要です。GFMでは、インラインコードの中でもこれが必要です。

| Command            | Meaning          |
|--------------------|------------------|
| `a \| b`           | a pipe, in code  |
| Either \| or       | a pipe, in text  |

パイプ形式の表は1行が1行分なので、セルの中に本物の改行や2つ目の段落は入れられません。ふつうはHTMLタグの<br>で回避します。

| Step  | What to do                          |
|-------|-------------------------------------|
| Build | Run the build.<br>Fix any errors.  |
| Ship  | Tag the release.<br>Push the tag.  |

同じ方法で、GitHubやHTMLを受け付けるほとんどのアプリで、セル内を複数行にできます。セル内ではMarkdownのリストは使えません。リストが必要なら、短い項目の間に<br>を入れるか、リストを表の外に出してください。

幅の広い表と長い文章

Markdownには列幅の指定もセルの結合もありません。表がどう収まるかは、表示するアプリが決めます。次のことを心がけると、どこでも読みやすい表になります。

  • セルは短く、単語か数字ひとつにします。長い説明は表の下の文章に書きます。
  • 列を減らします。8列あるなら、列と行を入れ替えて、列を項目、行を属性にします。
  • よく編集する表では、ソースの列を空白で揃えないでください。セルを1つ変えるたびに全行の余白を直すことになります。
  • セルの結合、行の結合、キャプションが必要なときは、表をHTMLで書きます。ほとんどのMarkdownアプリは素の<table>を表示します。

Markdownの表が表示されないとき

  • 区切り行がない。ハイフンの行があって初めて、テキストが表になります。
  • セルの数が合っていない。見出しが3セルで区切り行が2セルだと、何も表示されません。
  • エスケープしていないパイプがセル内にあると、セルが2つに分かれます。\|と書きます。
  • 表の途中の空行。表はそこで終わり、残りはただのテキストになります。
  • アプリが表に対応していない。表は元のMarkdownにもCommonMarkの中核にも含まれません。GFMで加わったものなので、最小限のパーサーではパイプが文字のまま表示されます。

コミットする前に結果を確認するには、ファイルをMarkdownリーダーで開きます。DotMDは表を整形して表示でき、閲覧は無料です。DotMD Editorでは、Insert → Tableで3列の表がファイルに挿入され、ライブプレビューが入力に合わせて描き直します。

Markdownの表に関するよくある質問

Markdownの表で文字を揃えるには?

見出しの下の区切り行(ハイフンの行)にコロンを付けます。:---で列が左揃え、:---:で中央揃え、---:で右揃えになります。

Markdownの表のセル内で改行するには?

改行したい位置に<br>を書きます。パイプ形式の表は1行が1行分なので、本物の改行やセル内のMarkdownのリストは使えません。

表のセルにパイプ文字を入れるには?

バックスラッシュでエスケープして\|と書きます。通常のテキストでもインラインコードの中でも必要です。

Markdownの表でセルを結合できますか?

できません。GFMの表にはcolspanもrowspanもありません。セルの結合が必要なら、<table>、colspan、rowspanを使ってHTMLで表を書きます。

その他の質問