HTMLで複数の要素を1つの要素内に使用できるのか？

2024-05-22

HTMLで複数の<tbody>要素を1つの<table>要素内に使用できるのか？

複数の<tbody>要素を使用する利点

視覚的な区切り: 表を論理的なセクションに分割し、読みやすくすることができます。
個別のスタイル設定: 各セクションに異なる背景色、フォント、ボーダーなどを設定することができます。
スクリプトによる操作: JavaScriptなどのスクリプトを使用して、個々の<tbody>要素を操作することができます。

連続配置: <tbody>要素は、必ず連続して配置する必要があります。<thead>や<tfoot>要素との間に配置したり、別の<tbody>要素の間に挟み込むことはできません。
行の重複: 同じ行を複数の<tbody>要素に含めることはできません。各行は1つの<tbody>要素にのみ属する**必要があります。
バリデーション: 厳格なXHTMLバリデーションでは、1つの<table>要素内に複数の<tbody>要素を使用することは無効とされる場合があります。

** 実際の例**

以下の例は、顧客情報と注文履歴を2つの<tbody>要素に分けて表示する表です。

<table>
  <thead>
    <tr>
      <th>顧客ID</th>
      <th>名前</th>
      <th>注文履歴</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1001</td>
      <td>田中 太郎</td>
      <td></td>
    </tr>
    <tr>
      <td>1002</td>
      <td>佐藤 花子</td>
      <td></td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td>
        <ul>
          <li>2023年11月14日 - 商品A</li>
          <li>2023年12月10日 - 商品B</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>
        <ul>
          <li>2024年1月15日 - 商品C</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

この例では、<tbody>要素ごとにスタイルを異なって設定することもできます。例えば、顧客情報セクションの背景色を薄灰色、注文履歴セクションの背景色を白にすることができます。

サンプルコード：顧客情報と注文履歴を2つの<tbody>要素に分けて表示

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>顧客情報と注文履歴</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    th, td {
      padding: 8px;
      border: 1px solid #ddd;
    }
    .customer-info {
      background-color: #f0f0f0;
    }
    .order-history {
      background-color: #fff;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>顧客ID</th>
        <th>名前</th>
        <th>注文履歴</th>
      </tr>
    </thead>
    <tbody>
      <tr class="customer-info">
        <td>1001</td>
        <td>田中 太郎</td>
        <td></td>
      </tr>
      <tr class="customer-info">
        <td>1002</td>
        <td>佐藤 花子</td>
        <td></td>
      </tr>
    </tbody>
    <tbody>
      <tr class="order-history">
        <td></td>
        <td></td>
        <td>
          <ul>
            <li>2023年11月14日 - 商品A</li>
            <li>2023年12月10日 - 商品B</li>
          </ul>
        </td>
      </tr>
      <tr class="order-history">
        <td></td>
        <td></td>
        <td>
          <ul>
            <li>2024年1月15日 - 商品C</li>
          </ul>
        </td>
      </tr>
    </tbody>
  </table>
</body>
</html>

このコードは以下の内容を生成します。

顧客ID	名前	注文履歴
1001	田中太郎	-
1002	佐藤花子	-
-	-	2023年11月14日 - 商品A<br>2023年12月10日 - 商品B
-	-	2024年1月15日 - 商品C

ポイント

<tbody>要素には、それぞれclass属性を設定して、CSSでスタイルを個別に設定しています。
注文履歴セクションには、<td>要素内に<h4>要素を使用して、見出しを追加しています。
実際のデータは、JavaScriptを使用して動的に読み込むこともできます。

この例を参考に、状況に合わせて<tbody>要素を効果的に活用してください。

HTMLで複数の<tbody>要素を使用する代替方法

複数<table>要素を使用する

最もシンプルな方法は、論理的に関連するデータごとに個別の<table>要素を使用することです。例えば、顧客情報と注文履歴をそれぞれ別の表にまとめることができます。

<table><thead>
    <tr><th>顧客ID</th><th>名前</th></tr>
  </thead>
  <tbody>
    <tr><td>1001</td><td>田中 太郎</td></tr>
    <tr><td>1002</td><td>佐藤 花子</td></tr>
  </tbody>
</table>

<table><thead>
    <tr><th>注文日</th><th>商品名</th></tr>
  </thead>
  <tbody>
    <tr><td>2023年11月14日</td><td>商品A</td></tr>
    <tr><td>2023年12月10日</td><td>商品B</td></tr>
    <tr><td>2024年1月15日</td><td>商品C</td></tr>
  </tbody>
</table>

詳細情報セクションを<td>要素内に作成する

<td>要素内に<h4>や<div>などの要素を使用して、詳細情報セクションを作成することができます。この方法では、表構造を維持しながら、論理的な区別と個別のスタイル設定が可能になります。

<table>
  <thead>
    <tr><th>顧客ID</th><th>名前</th></tr>
  </thead>
  <tbody>
    <tr>
      <td>1001</td>
      <td>田中 太郎</td>
      <td>
        <h4>注文履歴</h4>
        <ul>
          <li>2023年11月14日 - 商品A</li>
          <li>2023年12月10日 - 商品B</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td>1002</td>
      <td>佐藤 花子</td>
      <td>
        <h4>注文履歴</h4>
        <ul>
          <li>2024年1月15日 - 商品C</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

JavaScriptを使用して動的に操作する

<tbody>要素を動的に生成・削除・操作するには、JavaScriptを使用することができます。この方法では、データの読み込みや更新に応じて、表構造を柔軟に変更することができます。

<script>
  const customerData = [
    { id: 1001, name: "田中 太郎", orders: [{ date: "2023-11-14", product: "商品A" }, { date: "2023-12-10", product: "商品B" }] },
    { id: 1002, name: "佐藤 花子", orders: [{ date: "2024-01-15", product: "商品C" }] },
  ];

  function createTable() {
    const table = document.createElement('table');
    const thead = document.createElement('thead');
    const tbody = document.createElement('tbody');

    const headerRow = thead.insertRow();
    headerRow.insertCell().textContent = '顧客ID';
    headerRow.insertCell().textContent = '名前';
    headerRow.insertCell().textContent = '注文履歴';

    table.appendChild(thead);
    table.appendChild(tbody);

    customerData.forEach(customer => {
      const row = tbody.insertRow();
      row.insertCell().textContent = customer.id;
      row.insertCell().textContent = customer.name;

      const orderCell = row.insertCell();
      const orderList = document.createElement('ul');
      customer.orders.forEach(order => {
        const listItem = document.createElement('li');
        listItem.textContent = `${order.date} - ${order.product}`;
        orderList.appendChild(listItem);
      });
      orderCell.appendChild(orderList);
    });

    return table;
  }

  document.body.appendChild(createTable());
</script>

上記はあくまで例であり、具体的な方法は状況に合わせて調整する必要があります。

それぞれの方法の利点と欠点

方法	利点	欠点
複数<table>要素を使用する	シンプルで分かりやすい	セマンティックに弱い
`<td>`要素内に詳細情報セクションを作成する	表構造を

html html-table xhtml