<colgroup>タグの解説
<colgroup>は、テーブル（表）の中で列をグループ化します。<table>は基本的に<tr>で行のセルグループを定義しますが、列に対するアプローチを持っていません。そのため、複数の列を関連のある項目として扱いたい場合に、このタグを使用します。
例えば、左端の列と右隣の列が同じ意味合いの情報である場合に、グループ化して構造を明確にすることができます。さらに、スタイルシートの指定を一括で行うことも可能になります。
また、縦列に対してセルの幅をまとめて指定しておくと、指定された範囲の領域が確保された状態でページを読み込む事ができます。<table>の読み込みが遅れてレイアウトが崩れる現象が気になる場面で活用できる手段です。
似たような機能として<col>が用意されていますが、列を構造的な意味でグループ化したい場合は<colgroup>を、見栄えだけを調整したい場合は<col>を使用して下さい。もちろん併用もできます。
HTMLで表を作成する方法は、<table>を参照して下さい。
<colgroup>タグの特徴
- この要素は可視化されません。表のセルに対して間接的に効果を提供します。
- 設置場所は、
<table>あるいは<caption>の直後です。つまり<thead>や<tr>など、セルを構成する要素の前でなければなりません。 span属性を設定した場合、子要素に<col>を置くことはできません。
<colgroup>要素に指定できる属性
span- この要素が影響を及ぼす列の数を整数で指定します。初期値は
"1"です。 - グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<colgroup>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。<colgroup>は<table>の中で機能します。<caption>がなければ開始タグの直後に配置します。
<table>
<colgroup span="2" />
<tr>
<td>セルA1</td>
<td>セルB1</td>
</tr>
</table>
上記の例は、行に並んだ二つのセルをひとつの関連付けられた列グループとして扱うことを表しています。このグループに対して共通のスタイルシートを適用するとしたら、以下のように表記します。
// style属性に直接プロパティを指定
<colgroup span="2" style="color: blue;" />
// class属性でセレクタを定義
<colgroup span="2" class="name" />
<colgroup>と<col>を併用する
<colgroup>で列をグループ化する場合、子要素に<col>を配置する方法もあります。この時、span属性を指定するのは<col>要素だけになります。
<table>
<colgroup>
<col span="2" />
</colgroup>
<tr>
<td>セルA1</td>
<td>セルB1</td>
</tr>
</table>
見出しと列グループを分けて関連付ける
それでは、表の列をひとつの見出しと二つのグループに分けた例を紹介します。<col>のグループ化は行の先頭から順番に定義してきます。グループ化したくない列がある場合は、span属性を持たない<col>を配置して下さい。以下の内容は、グループ化した列に対してスタイルシートで幅と背景色を適用していることを表します。
<table>
<colgroup>
<col class="name" />
<col span="2" class="talent" />
<col span="2" class="skill" />
</colgroup>
<tr>
<th scope="col">名前</th>
<th scope="col">素質１</th>
<th scope="col">素質２</th>
<th scope="col">スキル1</th>
<th scope="col">スキル2</th>
</tr>
<tr>
<th scope="row">ファイター</th>
<td>攻撃力+15%</td>
<td>回避値+15%</td>
<td>三連撃</td>
<td>会心の一撃</td>
</tr>
<tr>
<th scope="row">タンク</th>
<td>防御力+15%</td>
<td>体力+20%</td>
<td>反射ガード</td>
<td>食いしばり</td>
</tr>
</table>
.table {
border-spacing: 0;
border-block-start: 1px solid gray;
border-inline-start: 1px solid gray;
font-size: small;
}
.table :where(th,td) {
padding-block: 0.25rem;
padding-inline: 0.5rem;
border-block-end: 1px solid gray;
border-inline-end: 1px solid gray;
text-align: center;
}
.table th {
background-color: #eee;
}
.table .name {
inline-size: 15%;
}
.table .talent {
inline-size: 20%;
background-color: rgb(0 0 255 / 0.1);
}
.table .skill {
inline-size: 20%;
background-color: rgb(255 0 0 / 0.1);
}