Markdownの表・テーブル内で改行する方法|br以外の書き方も解説

Markdownの表・テーブル内で改行する方法|br以外の書き方も解説 プログラマー・開発環境

Markdownで表を作っていると、セルの中だけで文章を改行したいことがあります。

たとえば、説明文を2行に分けたい、項目名と補足を同じセル内に入れたい、表の中で箇条書きのように見せたい、といったケースです。

結論から言うと、Markdownの表・テーブル内で改行したい場合は、セル内に<br>を入れる方法がもっとも簡単です。

ただし、<br>を使いたくない場合や、Markdown変換ツールによってうまく表示されない場合は、Markdownの表記法にこだわらず、HTMLの<table>を直接書いたほうが確実です。

この記事では、Markdownの表内で改行する方法、<br>以外で複数行に見せる方法、改行が反映されない原因をまとめて解説します。

Markdownの表・テーブル内で改行する方法

Markdownの表・テーブル内で改行するなら、セルの中に<br>を入れます。

| 項目 | 内容 |
| --- | --- |
| メリット | 軽い<br>読みやすい<br>HTMLに変換しやすい |
| デメリット | 表が長くなる<br>ツールによって表示差がある |

上記のように書くと、2列目のセル内で以下のように表示されます。

項目 内容
メリット 軽い
読みやすい
HTMLに変換しやすい
デメリット 表が長くなる
ツールによって表示差がある

Markdownの表では、通常のEnterキーによる改行をそのままセル内改行として扱えないことが多いです。

そのため、表のセル内だけで改行したい場合は、<br>を入れるのがもっとも分かりやすい方法です。

Markdownの表内改行はbrを使うのが基本

Markdownで通常の文章を改行する場合は、行末に半角スペースを2つ入れる方法があります。

しかし、表の中では半角スペース2つの改行よりも、<br>を使ったほうが分かりやすいです。

改行方法 表内改行
での使いやすさ
説明
<br> 使いやすい セル内の改行位置が見た目で分かりやすい
行末の半角
スペース2つ
分かりにくい スペースが目に見えないため、ミスに気づきにくい
空行 表内では使いにくい 表の構造が崩れる原因になることがある
HTMLの<table> 確実 複雑な表やbr以外で書きたい場合に向いている

特に日本語の文章では、行末の半角スペース2つは視認しにくいため、あとから編集するときに分かりにくくなります。

そのため、Markdownの表の中で改行したい場合は、まず<br>を使うのがおすすめです。

Markdownの表内でbrを使う具体例

たとえば、以下のような表を作りたいとします。

サービス 特徴
サービスA 料金が安い
初心者向け
設定が簡単
サービスB 高機能
中級者以上向け
細かく設定できる

この場合、Markdownでは以下のように書きます。

| サービス | 特徴 |
| --- | --- |
| サービスA | 料金が安い<br>初心者向け<br>設定が簡単 |
| サービスB | 高機能<br>中級者以上向け<br>細かく設定できる |

ポイントは、セルの中で改行したい位置に<br>を入れることです。

Markdownの表では、|が列の区切りになります。そのため、セル内に余計な|を入れると列が崩れることがあります。

Markdownの表内でbr以外の改行はできる?

Markdownの表内で<br>を使いたくない場合、Markdownだけできれいにセル内改行を再現するのは難しいです。

理由は、Markdownの表記法では、改行そのものが表の行の区切りとして扱われやすいからです。

たとえば、次のようにセルの途中でEnterキーを押して改行すると、Markdownの表として崩れる可能性があります。

| 項目 | 内容 |
| --- | --- |
| メリット | 軽い
読みやすい
HTMLに変換しやすい |

この書き方では、「読みやすい」や「HTMLに変換しやすい」が同じセル内の続きとして認識されない可能性があります。

そのため、表内で複数行に見せたい場合は、<br>を使うか、HTMLの表を直接書くのが現実的です。

br以外で表内を複数行にしたい場合はHTMLのtableを書く

<br>を使わずに、表の中を複数行のように見せたい場合は、Markdownの表ではなくHTMLの<table>を直接書く方法があります。

<table>
<tr>
<th>項目</th>
<th>内容</th>
</tr>
<tr>
<td>メリット</td>
<td>
<ul>
<li>軽い</li>
<li>読みやすい</li>
<li>HTMLに変換しやすい</li>
</ul>
</td>
</tr>
</table>

HTMLで書くと、表のセル内に<ul><p>などを入れられます。

そのため、単純な改行だけでなく、セル内に箇条書きや段落を入れたい場合は、HTMLの表を直接書いたほうがきれいです。

実際の表示例は以下のようになります。

項目 内容
メリット
  • 軽い
  • 読みやすい
  • HTMLに変換しやすい

Markdownのシンプルさは失われますが、複雑な表を作りたい場合はHTMLのほうが向いています。

Markdownの表内改行が反映されない原因

Markdownの表内で改行が反映されない場合は、以下の原因が考えられます。

原因 対処法
<br>ではなくEnterキーで改行している セル内の改行位置に<br>を入れる
Markdown変換ツールがHTMLタグを無効化している HTMLタグを許可する設定を確認する
表の中に余計な|が入っている セル内の|\|のようにエスケープする
Markdownの種類が違う GitHub Flavored Markdown、CommonMark、独自Markdownの違いを確認する
WordPressやエディタ側でHTMLが変換されている ビジュアルエディタではなくテキスト編集画面で確認する

Markdownは、使うサービスやエディタによって表示結果が変わることがあります。

GitHub、Qiita、VSCodeのプレビュー、WordPressのMarkdown系プラグインなどで、完全に同じ表示になるとは限りません。

そのため、表内改行を確実に見せたい場合は、公開前に実際の表示画面で確認することが重要です。

Markdownの表で縦棒を文字として使う場合

Markdownの表では、|が列の区切りとして使われます。

そのため、セルの中で|を文字として表示したい場合は、\|のようにバックスラッシュを付けてエスケープします。

| 記号 | 説明 |
| --- | --- |
| \| | 縦棒を文字として表示する |

表の中にプログラムコードや記号を入れる場合は、|の扱いに注意して下さい。

セル内改行だけでなく、縦棒の混入も表が崩れる原因になります。

Markdownの表で列の位置を揃える方法

Markdownの表では、2行目の-:で列の表示位置を指定できます。

書き方 表示位置
--- 通常
:--- 左寄せ
:---: 中央寄せ
---: 右寄せ

たとえば、以下のように書きます。

| 左寄せ | 中央寄せ | 右寄せ |
| :--- | :---: | ---: |
| テキスト | テキスト | テキスト |

列の位置指定は、表内改行とは別の指定です。

セル内で改行したい場合は、位置指定ではなく<br>を使います。

通常の文章でMarkdown改行したい場合

ここまで解説したのは、Markdownの表・テーブル内で改行する方法です。

表の外にある通常の文章を改行したい場合は、考え方が少し違います。

目的 書き方
同じ段落内で改行したい 行末に半角スペース2つ、または<br>を入れる
段落を分けたい 空行を1行入れる
表のセル内で改行したい セル内に<br>を入れる

通常の文章で改行したいだけなら、表内改行よりも「改行」と「段落」の違いを理解したほうが分かりやすいです。

表ではなく通常の文章の改行方法を知りたい場合は、別記事で「Markdownの改行方法」としてまとめるのがおすすめです。

Markdownの表内改行でよくある質問

Markdownの表の中でEnterキーを押せば改行できますか?

基本的にはおすすめしません。

Markdownの表では、1行が表の1行として扱われることが多いため、セルの途中でEnterキーを押すと表が崩れる可能性があります。

セル内で改行したい場合は、改行したい位置に<br>を入れて下さい。

Markdownの表内改行はbr以外でもできますか?

Markdownだけで安定して表内改行を表現するなら、<br>がもっとも分かりやすいです。

<br>を使いたくない場合は、Markdownの表ではなくHTMLの<table>を直接書く方法があります。

Markdownの表内で箇条書きは使えますか?

Markdownの表内で複雑な箇条書きを使うと、ツールによって表示が崩れることがあります。

セル内に箇条書きをきれいに入れたい場合は、HTMLの<table><ul>を使うほうが確実です。

GitHubのMarkdown表でもbrは使えますか?

GitHubのMarkdownでは、HTMLの<br>を使って改行できる場面があります。

ただし、README、Issue、Pull Request、Wikiなど、書く場所によって表示が変わる場合があります。公開前にプレビューで確認して下さい。

Markdownの表が崩れる原因は何ですか?

よくある原因は、セル内に余計な|が入っている、表の前に空行がない、2行目の---が足りない、セルの途中でEnterキーを押している、などです。

特にセル内に縦棒を文字として入れる場合は、\|のようにエスケープして下さい。

まとめ

Markdownの表・テーブル内で改行したい場合は、セル内に<br>を入れるのがもっとも簡単です。

| 項目 | 内容 |
| --- | --- |
| メリット | 軽い<br>読みやすい<br>HTMLに変換しやすい |

<br>を使いたくない場合や、セル内に箇条書き・段落・複雑なレイアウトを入れたい場合は、Markdownの表ではなくHTMLの<table>を直接書いたほうが確実です。

表の外にある通常の文章で改行したい場合と、表のセル内で改行したい場合は考え方が違います。

コメント

タイトルとURLをコピーしました