HTML Living Standard/colgroup

colgroup 要素

<colgroup> 要素は、HTML の表（<table> 要素）において、1つ以上の列（<col> 要素）のグループを定義するために使用されます。この要素を使うことで、表の列にスタイルや属性を適用する際に、列ごとにまとめて設定することができます。

基本構造

<colgroup> 要素は、<table> 内に配置され、1つ以上の <col> 要素を子要素として持つことができます。<col> 要素を使って、列に特定の幅、背景色、またはその他のスタイルを設定することができます。

基本的な構造の例：

<table>
  <colgroup>
    <col span="2" style="background-color: #f1f1f1;">
    <col style="background-color: #e0e0e0;">
  </colgroup>
  <thead>
    <tr>
      <th>商品名</th>
      <th>価格</th>
      <th>数量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>テレビ</td>
      <td>50,000円</td>
      <td>2</td>
    </tr>
    <tr>
      <td>冷蔵庫</td>
      <td>80,000円</td>
      <td>1</td>
    </tr>
  </tbody>
</table>

使用例

以下は、<colgroup> を使って表にスタイルを適用する例です：

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Table with Colgroup Example</title>
  </head>
  <body>
    <table border="1">
      <colgroup>
        <col span="2" style="background-color: #e0e0e0;">
        <col style="background-color: #f1f1f1;">
      </colgroup>
      <thead>
        <tr>
          <th>名前</th>
          <th>評価</th>
          <th>在庫</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>田中</td>
          <td>80</td>
          <td>10</td>
        </tr>
        <tr>
          <td>山田</td>
          <td>90</td>
          <td>20</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

colgroup の属性

<colgroup> 要素は、いくつかの属性を持っていますが、最も一般的に使用されるものは span 属性です。

span: <colgroup> に含まれる <col> 要素の数を指定します。これにより、複数の列に同じスタイルを一度に適用できます。

例えば、<col span="2"> のように書くことで、2つの列を対象にスタイルを適用できます。

例：

<colgroup>
  <col span="2" style="background-color: #d3d3d3;">
  <col style="background-color: #f1f1f1;">
</colgroup>

スタイリング

<colgroup> 要素やその子要素である <col> 要素は、スタイルシート（CSS）を使って、個々の列に異なるスタイルを適用するために使用されます。例えば、列ごとに異なる背景色や幅を設定できます。

以下は、CSS を使用して colgroup にスタイルを適用する例です：

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>Styled Table with Colgroup</title>
    <meta charset="UTF-8">
    <style>
      colgroup {
        border: 2px solid #000;
      }
      col {
        width: 100px;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col span="2" style="background-color: #f1f1f1;">
        <col style="background-color: #e0e0e0;">
      </colgroup>
      <thead>
        <tr>
          <th>名前</th>
          <th>評価</th>
          <th>在庫</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>田中</td>
          <td>80</td>
          <td>10</td>
        </tr>
        <tr>
          <td>山田</td>
          <td>90</td>
          <td>20</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

アクセシビリティ

<colgroup> 要素自体にはアクセシビリティに直接影響を与える特別な役割はありませんが、列ごとに異なるスタイルや属性を適用することができるため、視覚的に表を整理しやすくします。これにより、視覚的な情報を強調し、ユーザーが表をより理解しやすくなることがあります。

練習問題

練習1: 表の中で複数の列に同じスタイルを適用するために <colgroup> を使用してください。
練習2: span 属性を使って、3つの列に同じスタイルを一度に適用してください。
練習3: <colgroup> と <col> を使って、異なる列に異なる幅を設定してください。