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の表を直接書いたほうがきれいです。
実際の表示例は以下のようになります。
| 項目 | 内容 |
|---|---|
| メリット |
|
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の表では、1行が表の1行として扱われることが多いため、セルの途中でEnterキーを押すと表が崩れる可能性があります。
セル内で改行したい場合は、改行したい位置に<br>を入れて下さい。
Markdownだけで安定して表内改行を表現するなら、<br>がもっとも分かりやすいです。
<br>を使いたくない場合は、Markdownの表ではなくHTMLの<table>を直接書く方法があります。
Markdownの表内で複雑な箇条書きを使うと、ツールによって表示が崩れることがあります。
セル内に箇条書きをきれいに入れたい場合は、HTMLの<table>と<ul>を使うほうが確実です。
GitHubのMarkdownでは、HTMLの<br>を使って改行できる場面があります。
ただし、README、Issue、Pull Request、Wikiなど、書く場所によって表示が変わる場合があります。公開前にプレビューで確認して下さい。
よくある原因は、セル内に余計な|が入っている、表の前に空行がない、2行目の---が足りない、セルの途中でEnterキーを押している、などです。
特にセル内に縦棒を文字として入れる場合は、\|のようにエスケープして下さい。
まとめ
Markdownの表・テーブル内で改行したい場合は、セル内に<br>を入れるのがもっとも簡単です。
| 項目 | 内容 |
| --- | --- |
| メリット | 軽い<br>読みやすい<br>HTMLに変換しやすい |
<br>を使いたくない場合や、セル内に箇条書き・段落・複雑なレイアウトを入れたい場合は、Markdownの表ではなくHTMLの<table>を直接書いたほうが確実です。
表の外にある通常の文章で改行したい場合と、表のセル内で改行したい場合は考え方が違います。
コメント