Markdown テーブル内リスト作成
2024-10-06
Markdownテーブル内のリストを書く方法 (HTML、Markdown、GitHub Flavored Markdown)
Markdownでは、テーブル内のセルにリストを直接書くことはできません。しかし、HTMLのリストタグを直接使用することで、この制限を回避できます。
HTMLタグの使用
-
リストタグの挿入
- 箇条書きリスト:
<ul>と<li>タグを使用します。
- 箇条書きリスト:
-
テーブルセルへの埋め込み
例
Markdown
| Column 1 | Column 2 |
|---|---|
| Item 1 <ul><li>Subitem 1</li><li>Subitem 2</li></ul> | Item 2 |
| Item 3 | Item 4 <ol><li>Subitem 1</li><li>Subitem 2</li></ol> |
HTML出力
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Item 1 <ul><li>Subitem 1</li><li>Subitem 2</li></ul></td>
<td>Item 2</td>
</tr>
<tr>
<td>Item 3</td>
<td>Item 4 <ol><li>Subitem 1</li><li>Subitem 2</li></ol></td>
</tr>
</table>
GitHub Flavored Markdownでの注意
- レンダリング
GitHubのレンダリングエンジンは、HTMLタグを正しく解釈して表示します。 - HTMLタグの許可
GitHub Flavored Markdownでは、HTMLタグの使用が許可されています。
Markdownテーブル内リスト作成のコード例 (日本語解説)
| Column 1 | Column 2 |
|---|---|
| Item 1 <ul><li>Subitem 1</li><li>Subitem 2</li></ul> | Item 2 |
| Item 3 | Item 4 <ol><li>Subitem 1</li><li>Subitem 2</li></ol> |
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Item 1 <ul><li>Subitem 1</li><li>Subitem 2</li></ul></td>
<td>Item 2</td>
</tr>
<tr>
<td>Item 3</td>
<td>Item 4 <ol><li>Subitem 1</li><li>Subitem 2</li></ol></td>
</tr>
</table>
コード解説
-
<table>: テーブルの開始タグです。<ul>: 箇条書きリストの開始タグです。
-
| Column 1 | Column 2 |: テーブルのヘッダ行を定義します。|---|---|: テーブルのセパレータ行を定義します。Item 1 <ul><li>Subitem 1</li><li>Subitem 2</li></ul>: 箇条書きリストをHTMLタグで記述し、テーブルセル内に埋め込みます。
外部リストの使用
- セルへの参照
テーブルセル内で、リストの項目を参照するテキストを使用します。 - リストの定義
テーブルの外側にリストを定義します。
例
リスト:
- Item 1
- Item 2
- Item 3
| Column 1 | Column 2 |
|---|---|
| Item 1 | Item 2 |
| Item 3 | Item 4 |
タブやスペースによるインデント
- レンダリング
Markdownレンダリングエンジンによっては、インデントされたテキストをリストとして解釈します。 - インデント
テーブルセル内で、リストの項目をタブやスペースでインデントします。
| Column 1 | Column 2 |
|---|---|
| Item 1
> Subitem 1
> Subitem 2
| Item 2
> Subitem 1
> Subitem 2 |
Markdown拡張の使用
- 使用方法
拡張機能のドキュメントを参照して、具体的な使用方法を確認してください。 - 拡張機能
一部のMarkdown拡張機能は、テーブルセル内のリストをサポートしています。
注意
- 可読性
外部リストやインデントを使用する場合、テーブルの構造が複雑になる可能性があります。 - レンダリングエンジン依存
これらの代替方法は、使用するMarkdownレンダリングエンジンによってサポートが異なる場合があります。
html markdown github-flavored-markdown
