<col>タグの解説
<col>は、テーブル（表）の中で列に対してスタイルや属性をまとめて指定します。基本的に、この要素は<colgroup>の子要素に配置します。
例えば、左端の列に属するセルに一括で背景色をつけたい場合に有効です。セルそのものにスタイルを適用するのではなく、<col>で操作した方が管理しやすくなります。これにより、表そのもののスタイルを変えずに列に対してバリエーションを増やすことができます。
また、列に対して横幅をまとめて指定しておくと、指定された範囲の領域が確保された状態でページを読み込む事ができます。<table>の読み込みが遅れてレイアウトが崩れる現象が気になる場面で活用できる手段です。
HTMLで表を作成する方法は、<table>を参照して下さい。
<col>タグの特徴
- この要素は可視化されません。表のセルに対して視覚的な効果を提供します。
- この要素は空要素です。開始タグのあとに終了タグを記述する必要はありません。
<colgroup>の子要素としてのみ配置できます。ただし、<colgroup>の開始タグが省略可能であるため、<col>単体でも機能します。- 同一のページ内に複数使うことができます。ただし、
span属性の設定された<colgroup>の下には置けません。
<col>要素に指定できる属性
span- この要素が影響を及ぼす列の数を整数で指定します。初期値は
"1"です。 - グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<col>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。原則として<colgroup>の中に配置しなければなりませんが、省略できる条件下であれば単体でも機能します。終了タグは空要素であるため記述する必要はありません。
<table>
<colgroup>
<col span="2" />
</colgroup>
<tr>
<td>セルA1</td>
<td>セルB1</td>
</tr>
</table>
上記の例は、行に並んだ二つのセルをひとつの関連付けられた列グループとして扱うことを表しています。このグループに対して共通のスタイルシートを適用するとしたら、以下のように表記します。
// style属性に直接プロパティを指定
<col span="2" style="color: blue;" />
// class属性でセレクタを定義
<col span="2" class="name" />
見出しと列グループを分けて関連付ける
それでは、表の列をひとつの見出しと二つのグループに分けた例を紹介します。<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);
}