<colgroup> 表（テーブル）の縦列をグループ化する

<colgroup>タグの説明

<colgroup>は、表（テーブル）の縦列をグループ化する際に使用します。基本的に<table>は、<tr>の中に行のセルグループを持っていますが、列に対するアプローチを持っていません。その問題を解決するのが、このタグの役目です。

例えば、左端の列と右隣の列が同じ意味合いの情報である場合に、グループ化して構造を明確にすることができます。さらに、スタイルシートの適用を一括で行うことも可能となります。

また、縦列に対してセルの横幅をまとめて指定しておくと、指定された範囲の領域が確保された状態でページを読み込む事ができます。<table>の読み込みが遅れてレイアウトが崩れる現象が気になる場合に活用してみると良いでしょう。

似たような機能として<col>が用意されていますが、縦列を構造的な意味でグループ化したい場合は<colgroup>を、見栄えだけを調整したい場合は<col>を使用して下さい。

<colgroup>タグの特徴

• この要素は可視化されません。表のセルに対して間接的に効果を提供します。
• 設置場所は、<table>あるいは<caption>の直後です。つまり<thead>や<tr>など、セルを構成する要素の前でなければなりません。
• span属性を設定した場合、子要素に<col>を置くことはできません。

<colgroup>に指定できる主な属性

span="整数"

この要素が影響を及ぼす列の数を指定します。初期値は "1" です。

グローバル属性

全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。

イベントハンドラ

全てのHTML要素に指定できるコンテンツ属性です。

<colgroup>の使い方とサンプル

以下の例では、表の左端とそれ以外の列をグループ分けして、それぞれにスタイルを適用しています。

<table class="sample">
	<colgroup style="width: 10%; background: #eee;">
	<colgroup span="3" style="width: 30%;">
	<tr>
		<th>項目</th>
		<th>一回目</th>
		<th>二回目</th>
		<th>三回目</th>
	</tr>
	<tr>
		<td>出席</td>
		<td>18人</td>
		<td>16人</td>
		<td>20人</td>
	</tr>
	<tr>
		<td>欠席</td>
		<td>2人</td>
		<td>4人</td>
		<td>0人</td>
	</tr>
	<tr>
		<td>早退</td>
		<td>0人</td>
		<td>2人</td>
		<td>0人</td>
	</tr>
</table>

.sample {
	border-collapse: collapse;
}
.sample th {
	padding: 3px 5px;
	border: 1px solid #333;
	font-weight: bold;
}
.sample td {
	padding: 3px 5px;
	border: 1px solid #333;
}