table要素のカラム（列）グループの使い方

HTMLで表を作成するときに、列に対して色の設定をしたい、などというときに便利なのがcolgroupとcolです。

これの使い方を知っていると、見やすい表が作れるようになって、表組みのバリエーションも増えるので、知っておくと便利です。

記述するときは<colgroup class="グループ名" span="列数"><col class="グループ名" span="列数"></colgroup>という感じで使います。

classにCSSを設定すれば、列ごとにセルの色を変えたり、太字にしたりといった設定が効率よく行えます。

具体的にどんな感じなのか、実例を使って表示して見ましょう。
tableのソースは以下のように各生徒のテストの点数の集計表を作ったとします。

CSSの設定せずに表示したらこんな感じになります。

<col class="グループ名" span="3">の「グループ名」のところにスタイシートを設定するとこんな具合になります。

スタイルシートは氏名の1列に背景をグレー、英国数の科目の点数の3列にまとめて黄色の背景、合計の1列に赤の背景を設定しています。

このようにcolgroupを使うと、縦の列に対して一括で設定ができるので、知っていると便利です。