HTML <colgroup> 要素

1. HTML <colgroup> 要素の役割

テーブル内の特定の列（カラム）に対してスタイルを適用したい場合、通常であればすべての行（<tr>）の各セル（<td> または <th>）に同じスタイルを記述する必要があります。しかし、<colgroup> 要素を使用すれば、テーブルの列全体に対して一括でスタイルを定義することが可能です。

<colgroup> タグは、テーブル内の1つ以上の列のグループを指定するために使用されます。

1.1 基本的な実装例

<colgroup> 要素は、必ず <table> 要素の内部、かつ <caption> などの他の要素よりも後、そして <thead> や <tbody> などの要素よりも前に配置する必要があります。

<table>
  <colgroup>
    <col span="2" style="background-color: #D6EEEE">
    <col style="background-color: pink">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>タイトル</th>
    <th>価格</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>私の初HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>5869207</td>
    <td>私の初CSS</td>
    <td>$49</td>
  </tr>
</table>

この例では、最初の2列に薄い水色の背景を、3列目にピンクの背景を一括で適用しています。

2. <col> 要素と span 属性

<colgroup> の内部には、1つ以上の <col> 要素を配置します。<col> 要素にはコンテンツは含まれず、属性のみを持ちます。

2.1 span 属性の使い方

span 属性を使用すると、そのスタイルが何列分に適用されるかを指定できます。

• <col span="2">：連続する2つの列を対象にします。
• span 属性を指定しない場合、デフォルトで「1列」が対象となります。

2.2 制御可能な CSS プロパティ

歴史的な理由により、<col> 要素に対してすべての CSS プロパティが機能するわけではありません。一般的にブラウザで確実にサポートされているのは以下のプロパティです。

• width（幅）
• visibility（可視性）
• background（背景関連）
• border（境界線：ただし border-collapse が collapse に設定されている場合のみ）

3. 特定の列をスキップするスタイリング

一部の列だけにスタイルを適用し、中間の列をスキップしたい場合は、スタイルを持たない空の <col> を配置することで、対象となる列の位置を調整できます。

<table>
  <colgroup>
    <col span="2" style="background-color: #D6EEEE">
    <col> <col style="background-color: pink">
  </colgroup>
  <tr>
    <th>ID</th>
    <th>名前</th>
    <th>年齢</th>
    <th>拠点</th>
  </tr>
  <tr>
    <td>1</td>
    <td>佐藤</td>
    <td>25</td>
    <td>東京</td>
  </tr>
</table>

このマークアップにより、最初の2列と4列目だけに色がつき、3列目はデフォルトのまま維持されます。

4. <colgroup> を使用した非表示制御

開発の現場では、特定の列を動的に、あるいは条件によって非表示にしたい場合があります。その際、CSS の visibility: collapse を <col> に適用することで、列全体のレイアウトを崩さずに非表示にすることが可能です。

.hidden-column {
  visibility: collapse;
}

5. まとめ

HTMLテーブルの構造を整理し、メンテナンス性を高めるための主要なタグは以下の通りです。

<colgroup> を活用することで、HTMLのコード量が削減され、デザイン変更時にも <col> 要素を修正するだけで済むため、非常にDRY（Don't Repeat Yourself）なマークアップを実現できますね。