プログラミング初心者でも安心！テーブル内リストの作り方（HTML、Markdown、GFM）

2024-06-09

HTML、Markdown、GitHub Flavored Markdownにおけるテーブル内リスト作成方法

Markdownは、シンプルな記法でテキストを記述できる軽量マークアップ言語です。一方、HTMLはWebページの構造やレイアウトを定義する言語です。GitHub Flavored Markdown（GFM）は、GitHubで拡張されたMarkdown構文であり、テーブル内リスト作成を含むいくつかの追加機能を提供します。

本記事では、HTML、Markdown、GFMにおけるテーブル内リストの記述方法について解説します。

HTMLによるテーブル内リスト

HTMLでは、以下の方法でテーブル内リストを作成できます。

<table>
  <tr>
    <th>項目</th>
    <th>内容</th>
  </tr>
  <tr>
    <td>タスク</td>
    <td>
      <ul>
        <li>分析</li>
        <li>設計</li>
        <li>開発</li>
        <li>テスト</li>
      </ul>
    </td>
  </tr>
</table>

この例では、<table>タグで表要素を作成し、<tr>タグで表行を作成します。各行のセルには、<th>タグでヘッダーセル、<td>タグでデータセルを設定します。データセル内には、<ul>タグで箇条書きリストを作成し、リスト項目を<li>タグで囲みます。

Markdownによるテーブル内リスト

標準的なMarkdownでは、テーブルセル内にリストを直接記述することはできません。しかし、改行記号（\n）とパイプ記号（|）のエスケープを用いることで、疑似的なリストを作成することができます。

| 項目 | 内容 |
|---|---|
| タスク |
| - 分析
| - 設計
| - 開発
| - テスト |

この例では、改行記号（\n）を2つ使用してリスト項目を区切り、パイプ記号（|）をエスケープ（\|）することで、テーブルセル内にリストを表示します。

GFMでは、拡張機能としてテーブルセル内に直接リストを記述することができます。

| 項目 | 内容 |
|---|---|
| タスク |
| - 分析
| - 設計
| - 開発
| - テスト
|

この例では、GFMでサポートされている拡張機能を利用して、テーブルセル内に箇条書きリストを直接記述しています。

その他の方法

HTMLとMarkdownを混在させる
コードブロックを使用する
テーブル作成用ライブラリを使用する

注意点

使用するツールやサービスによっては、上記の方法がすべてサポートされているとは限りません。
テーブル内リストを作成する際は、可読性とメンテナンス性を考慮することが重要です。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>テーブル内リスト（HTML）</title>
</head>
<body>
  <table>
    <tr>
      <th>項目</th>
      <th>内容</th>
    </tr>
    <tr>
      <td>タスク</td>
      <td>
        <ul>
          <li>分析</li>
          <li>設計</li>
          <li>開発</li>
          <li>テスト</li>
        </ul>
      </td>
    </tr>
  </table>
</body>
</html>

Markdown（標準）

| 項目 | 内容 |
|---|---|
| タスク |
| - 分析
| - 設計
| - 開発
| - テスト |

Markdown（GFM）

| 項目 | 内容 |
|---|---|
| タスク |
| - 分析
| - 設計
| - 開発
| - テスト
|

上記以外にも、様々な方法でテーブル内リストを作成することができます。詳細は、前述の解説記事や参考情報をご確認ください。

補足

上記のサンプルコードは、あくまでも基本的な例です。実際の使用場面に合わせて、適宜カスタマイズしてください。
コードの動作確認は、HTMLエディタやMarkdownプレビューツールなどを利用して行うことができます。

HTML、Markdown、GFM以外でのテーブル内リスト作成方法

CSVファイルと表作成ツールを使用する

テーブルデータをCSVファイルで用意します。
Excelなどの表作成ツールでCSVファイルを開き、テーブル形式で表示します。
表作成ツールの機能を使って、セル内に箇条書きリストを作成します。
作成したテーブルをHTML形式で保存します。

例：Excelでの作成方法

Excelで新しいワークシートを作成します。
A列に「項目」、B列に「内容」と入力します。
B2セルに「タスク」と入力します。
B3セルに以下の式を入力します。

=TEXT(ROW(),"-0")&" 分析"

B3セルの書式設定を開き、「配置」タブで「折り返し行を挿入」にチェックを入れます。
B4セルからB6セルまで、B3セルの式をコピーして貼り付けます。
セル範囲B2:B6を選択し、右クリックメニューから「セルの書式設定」を選択します。
「境界」タブで、外側境界線と内側境界線を設定します。
ファイルメニューから「名前を付けて保存」を選択し、「ファイルの種類」を「Web ページ (*.htm; *.html)」に変更して保存します。

データベースとWebフレームワークを使用する

テーブルデータをデータベースに格納します。
Webフレームワークを使用して、データベースからテーブルデータを動的に取得します。
テンプレートエンジンを使用して、テーブルデータをHTML形式で出力します。
テンプレート内で、リスト項目を生成するロジックを実装します。

例：Django（Python）での作成方法

Djangoプロジェクトを作成し、アプリを作成します。
models.pyで、テーブルモデルを定義します。

from django.db import models

class Task(models.Model):
  name = models.CharField(max_length=255)
  steps = models.TextField()

views.pyで、テーブルデータを取得してテンプレートにレンダリングするビュー関数を定義します。

from django.shortcuts import render
from .models import Task

def index(request):
  tasks = Task.objects.all()
  context = {
    'tasks': tasks,
  }
  return render(request, 'index.html', context)

templates/index.htmlで、テーブルとリスト項目を生成するHTMLコードを記述します。

<table>
  <tr>
    <th>項目</th>
    <th>内容</th>
  </tr>
  {% for task in tasks %}
    <tr>
      <td>{{ task.name }}</td>
      <td>
        <ul>
          {% for step in task.steps.split('\n') %}
            <li>{{ step }}</li>
          {% endfor %}
        </ul>
      </td>
    </tr>
  {% endfor %}
</table>

JavaScriptライブラリを使用する

HTMLで空のテーブルを作成します。
JavaScriptライブラリを使用して、テーブルデータとリスト項目を動的に生成します。

例：DataTablesとjQueryでの作成方法

<table>
  <thead>
    <tr>
      <th>項目</th>
      <th>内容</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

JavaScriptで、DataTablesとjQueryを読み込みます。

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>

JavaScriptで、テーブルデータとリスト項目を生成して、DataTablesに設定します。

$(document).ready(function() {
  const tasks = [
    {
      name: 'タスク1',
      steps: [
        '分析',
        '設計',
        '開発',
        'テスト',
      ],
    },
    {
      name: 'タスク2',
      steps: [
        '要件定義',
        '仕様設計',
        '実装',
        '検証',
      ],
    },
  ];

  const table = $('#myTable').