HTML / 要素

colgroup要素の使い方

colgroup要素は、表の列をグループにまとめます。たとえば、料金表の「ライト」と「スタンダード」の列をひとまとめにできます。

先に結論

表の中で列をまとめたいときは、colgroupをcaptionの後、見出し行やデータ行の前に置きます。

colgroupは列の名前を付ける要素ではありません。見出しの文字はthに書きます。列ごとの見た目を整える必要がなければ、colgroupを使わなくてもかまいません。

小さな例

<style>
  .plan-columns {
    background-color: #eaf3ff;
  }
</style>

<table>
  <caption>プランごとの月額料金</caption>
  <colgroup>
    <col>
  </colgroup>
  <colgroup span="2" class="plan-columns"></colgroup>
  <thead>
    <tr>
      <th scope="col">項目</th>
      <th scope="col">ライト</th>
      <th scope="col">スタンダード</th>
    </tr>
  </thead>
  <tbody>
    <tr><th scope="row">月額</th><td>500円</td><td>900円</td></tr>
  </tbody>
</table>

プランごとの月額料金
項目	ライト	スタンダード
月額	500円	900円

最初の列はcolで表し、残りの2列はspan="2"でひとまとめにしています。青い背景はCSSで付けた見た目で、列の見出しはthが伝えています。

colgroupとcolの使い分け

colgroupは、列のまとまりを作ります。
colは、そのまとまりの中にある1列以上を表します。
グループの列数だけを指定するなら、空のcolgroupにspanを書けます。
列ごとに設定を変えるなら、colgroupの中にcolを置き、spanはcolに書きます。

グループ全体のspanと、その中のcolは同時に使いません。どちらか一つの方法を選びます。

見出しは別に付ける

colgroupは列をまとめますが、「料金」や「名前」のような列名は伝えません。列の見出しはth scope="col"で書きます。列グループを一つの見出しで説明するときも、その文字を表すthが必要です。

よくある間違い

colgroupに見出しの文字を書く。文字を見せて列の意味を伝える役目はthです。
colgroupをtbodyやtrの後に置く。表では列グループを行より前に置きます。
colgroup span="2"と子のcolを一緒に使う。グループの列数を指定する方法を一つ選びます。
すべてのCSS設定が列に効くと思う。列に使えるCSSの設定は限られています。背景色が見えない場合は、セルや行に別の背景色が付いていないか確認します。