【HTML】colgroup・col 要素の使い方｜テーブルの列にまとめてスタイルを適用する

HTML のテーブルは、行（<tr>）とセル（<td>）を組み合わせて作りますが、これらはすべて「行方向」の構造です。そのため「ある列全体にまとめて背景色を付けたい」「特定の列だけ幅を広げたい」といった列単位の指定が意外と面倒になります。この列方向の指定を助けてくれるのが <colgroup> と <col> です。この記事では、列にまとめてスタイルを適用する基本の使い方、複数列をまとめる span 属性、col に効くCSSの制限、そして行ごとに指定する従来のやり方との違いまでを、動くデモを交えて初心者向けに解説します。

なぜ列の指定は難しいのか

テーブルの HTML は、<tr>（行）の中に <td>（セル）を並べる構造です。つまりマークアップ上は「行」が主役で、「列」に対応する要素はどこにもありません。そのため、たとえば「2列目だけ背景色を変えたい」と思っても、すべての行の2番目の <td> に1つずつクラスを付けて回る必要があり、行が増えるほど手間もミスも増えます。

そこで登場するのが <colgroup> と <col> です。これらは「列」を表す仮想的な要素で、テーブルの先頭にまとめて書いておくだけで、対応する列全体にスタイルを適用できます。1か所書くだけで済むため、列単位の見た目を整えるのがぐっと楽になります。

colgroup と col の基本

<colgroup> は列のグループをまとめる入れ物で、その中に列の数だけ <col> を並べます。<colgroup> は <table> の開始直後（<thead> より前）に置くのが決まりです。まずは各要素の役割を整理しておきましょう。

次のデモは、1列目と「2〜3列目」でそれぞれ違う背景色を付けた例です。CSS タブと HTML タブを見比べながら、<col> に付けたクラスが列全体に効いていることを確認してみてください。

<table>
  <colgroup>
    <col class="col-item" />
    <col class="col-price" span="2" />
  </colgroup>
  <thead>
    <tr>
      <th>商品</th>
      <th>通常価格</th>
      <th>セール価格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>りんご</td>
      <td>200円</td>
      <td>150円</td>
    </tr>
    <tr>
      <td>みかん</td>
      <td>300円</td>
      <td>250円</td>
    </tr>
  </tbody>
</table>

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px 12px;
  text-align: left;
}

/* 1列目にまとめて背景色を付ける */
.col-item {
  background-color: #eef6ff;
}

/* 2〜3列目（span="2"）にまとめて背景色を付ける */
.col-price {
  background-color: #fff7e6;
}

1つ目の <col class="col-item"> が1列目に対応し、薄い青の背景が「りんご」「みかん」の列全体に付いています。すべての <td> にクラスを書かなくても、<col> に指定するだけで列全体へ反映されるのがポイントです。

span 属性で複数の列をまとめる

先ほどのデモで、2番目の <col> には span="2" を付けていました。span 属性は「この <col> が何列ぶんを担当するか」を表します。span="2" なら1つの <col> で2列を受け持つため、「通常価格」と「セール価格」の2列にまとめて同じ背景色が付きます。

<colgroup>
  <col class="col-item" />         <!-- 1列目 -->
  <col class="col-price" span="2" /> <!-- 2〜3列目をまとめる -->
</colgroup>

ここで大切なのは、<col> の数と span の合計が、テーブルの実際の列数と一致している必要があるという点です。上の例では「1 + 2 = 3列」で、テーブルの3列とちょうど合っています。列数がずれると、意図しない列にスタイルが当たってしまうので注意しましょう。同じ扱いをしたい列が連続しているときは、span を使うと <col> の記述をすっきりまとめられます。

col に効くCSSは限られている

<col> には、どんなCSSでも効くわけではありません。<col> は実際のセルではなく「列」という特殊な存在のため、適用できるプロパティが限られています。実務でよく使う、<col> に効く代表的なプロパティを整理しておきましょう。

逆に、文字色（color）や余白（padding）、文字寄せ（text-align）といった「セルの中身」に関わる指定は <col> には効きません。これらはセルそのものの性質なので、<col> ではなく <td> 側に指定する必要があります。つまり <col> は「列の背景と幅をまとめて整える」のが得意、と覚えておくとよいでしょう。文字の装飾までまとめてやりたい場合は、後述する疑似クラスと組み合わせる方法が向いています。

col が使えない・効かないと感じたとき

文字色や padding を col に指定している

前述のとおり、color や padding、text-align は <col> には効きません。「背景色は変わるのに文字色だけ変わらない」というときは、これらのプロパティをセル側で指定する必要があります。列ごとにセルの中身も装飾したい場合は、td:nth-child(2) のように :nth-child 疑似クラスで「各行の2番目のセル」を狙う方法が使えます。背景や幅は <col>、中身の装飾は :nth-child、と役割を分けると扱いやすくなります。

背景色が透けて見えない

<col> に付けた背景色は、テーブルの背景としてはもっとも下の層に描画されます。そのため <td> や <th> のセル自身に別の背景色が指定されていると、そちらが上に重なって <col> の色が見えなくなります。列の背景色が反映されないときは、セル側に背景色が設定されていないかを確認しましょう。セルの背景を透明（初期状態）にしておけば、下にある <col> の色が透けて見えます。

まとめ

<colgroup> と <col> は、行方向の構造しか持たないテーブルに「列」という切り口を与え、列単位でまとめてスタイルを適用できるようにする要素です。<table> の先頭に <colgroup> を置き、その中に列の数だけ <col> を並べ、span で連続する列をまとめられます。ただし <col> に効くのは background・width・border など一部のプロパティに限られ、文字色や余白などセルの中身に関わる指定は <td> 側や :nth-child で行います。列全体の背景色や列幅をすっきり整えたいときに、<colgroup>・<col> は頼りになる要素です。

参考ページ

• <colgroup> – HTML | MDN
• <col> – HTML | MDN