【HTML Living Standard】colgroup要素の使い方

colgroupオブジェクトは、HTMLのテーブル（表）において、一つまたは複数の列をグループ化するために使用されるオブジェクトです。このオブジェクトを使うと、テーブル内の特定の列のグループに対して、共通のスタイルや属性を一括で適用できます。例えば、テーブルの複数の列に同じ背景色を設定したい場合や、特定の列の幅をまとめて指定したい場合に非常に便利です。

colgroupは、<table>要素の直後、<caption>要素の後に配置され、<thead>、<tbody>、<tfoot>、<tr>といった他の行やセルに関する要素の前に記述する必要があります。colgroup要素自体には、直接的な表示内容は含まれませんが、span属性を用いてグループ化する列の数を指定したり、内部にcol要素を含めることで、グループ内の個々の列にさらに詳細な設定を行うことが可能です。

このオブジェクトを利用することで、HTML構造がより整理され、コードの可読性やメンテナンス性が向上します。また、CSSと組み合わせることで、テーブルの見た目を柔軟に制御できるようになり、ウェブページのレイアウトを効率的にデザインする上で重要な役割を果たします。特に、大規模なデータテーブルを扱う際に、各列に個別にスタイルを適用する手間を省き、効率的な開発を支援します。

Copy
1<table>
2  <colgroup span="2"></colgroup>
3  <colgroup></colgroup>
4  <thead>
5    <tr>
6      <th>列1</th>
7      <th>列2</th>
8      <th>列3</th>
9    </tr>
10  </thead>
11  <tbody>
12    <tr>
13      <td>データA</td>
14      <td>データB</td>
15      <td>データC</td>
16    </tr>
17  </tbody>
18</table>

引数なし

引数はありません

戻り値なし

戻り値はありません