<colgroup> 表(テーブル)の縦列をグループ化する
取り扱い | 現行の標準 |
カテゴリ |
なし |
親にできる要素 | <table> 。<caption> より後かつセル要素の前 |
子にできる要素 | <col> 。span 属性を与えた場合はなし。 |
対応ブラウザ | caniuseで確認 |
<colgroup>タグの説明
<colgroup>
は、表(テーブル)の縦列をグループ化する際に使用します。基本的に<table>
は、<tr>
の中に行のセルグループを持っていますが、列に対するアプローチを持っていません。その問題を解決するのが、このタグの役目です。
例えば、左端の列と右隣の列が同じ意味合いの情報である場合に、グループ化して構造を明確にすることができます。さらに、スタイルシートの適用を一括で行うことも可能となります。
また、縦列に対してセルの横幅をまとめて指定しておくと、指定された範囲の領域が確保された状態でページを読み込む事ができます。<table>
の読み込みが遅れてレイアウトが崩れる現象が気になる場合に活用してみると良いでしょう。
似たような機能として<col>
が用意されていますが、縦列を構造的な意味でグループ化したい場合は<colgroup>
を、見栄えだけを調整したい場合は<col>
を使用して下さい。
<colgroup>タグの特徴
<colgroup>に指定できる主な属性
- span="整数"
- この要素が影響を及ぼす列の数を指定します。初期値は "1" です。
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<colgroup>の使い方とサンプル
以下の例では、表の左端とそれ以外の列をグループ分けして、それぞれにスタイルを適用しています。
表示確認
HTML
<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>
CSS
.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;
}
<colgroup>に関連するHTMLタグ
表(テーブル)を作成する要素 | |
---|---|
<table> | 表(テーブル)を作成する |
<caption> | 表(テーブル)にキャプションを付ける |
<col> | 表(テーブル)の縦列の属性をまとめて指定する |
<colgroup> | 表(テーブル)の縦列をグループ化する |
<tr> | 表(テーブル)の横一行を定義する |
<th> | 表(テーブル)の見出しとなるセルを作成する |
<td> | 表(テーブル)のセルを作成する |
<thead> | 表(テーブル)のヘッダー行を定義する |
<tbody> | 表(テーブル)の本体部分を定義する |
<tfoot> | 表(テーブル)のフッター行を定義する |