<col> 表(テーブル)の縦列の属性をまとめて指定する
取り扱い | 現行の標準 |
カテゴリ |
なし |
親にできる要素 | <colgroup> 。ただし、span 属性のないもの |
子にできる要素 | なし |
対応ブラウザ | caniuseで確認 |
<col>タグの説明
<col>
は、表(テーブル)の縦列に対してスタイルや属性をまとめて指定する際に使用します。<table>
のマークアップは煩雑になりがちで、ブラウザのレンダリングにも負荷がかかります。それらを軽減するのが、このタグを使う目的です。
例えば、左端の列のセルに背景色をつけたい場合に、セルそのものにスタイルシートを適用するのではなく、<col>
で一括管理ができるようになります。これによって、表そのもののスタイルは変えずに背景色だけにバリエーションを加える事が可能となります。
また、縦列に対して横幅をまとめて指定しておくと、指定された範囲の領域が確保された状態でページを読み込む事ができます。<table>
の読み込みが遅れてレイアウトが崩れる現象が気になる場合に活用してみると良いでしょう。
この要素は、span
属性の設定されていない<colgroup>
の中で使えます。縦列を構造的な意味でグループ化したい場合は<colgroup>
を、見栄えだけを調整したい場合は<col>
を使用して下さい。
<col>タグの特徴
- この要素は可視化されません。表のセルに対して視覚的な効果を提供します。
- 基本的には
<colgroup>
の子要素として配置します。ただし、<colgroup>
の開始タグが省略可能であるため、<col>
単体でも機能します。 - 同一のページ内に複数使うことができます。ただし、
span
属性の設定された<colgroup>
の下には置けません。
<col>に指定できる主な属性
- span="整数"
- この要素が影響を及ぼす列の数を指定します。初期値は
1
です。 - グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<col>の使い方とサンプル
以下の例では、表の左端の列に対して背景色を追加しています。それ以外の列はspan
属性で適用範囲を定め、横幅が同じになるようにスタイルを適用しています。
表示確認
HTML
<table class="sample">
<colgroup>
<col style="width: 20%; background: #eee;">
<col span="2" style="width: 40%;">
</colgroup>
<tr>
<th>名前</th>
<th>性別</th>
<th>年齢</th>
</tr>
<tr>
<td>太郎</td>
<td>男</td>
<td>24歳</td>
</tr>
<tr>
<td>愛子</td>
<td>女</td>
<td>21歳</td>
</tr>
<tr>
<td>健二</td>
<td>男</td>
<td>18歳</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;
}
<col>に関連するHTMLタグ
表(テーブル)を作成する要素 | |
---|---|
<table> | 表(テーブル)を作成する |
<caption> | 表(テーブル)にキャプションを付ける |
<col> | 表(テーブル)の縦列の属性をまとめて指定する |
<colgroup> | 表(テーブル)の縦列をグループ化する |
<tr> | 表(テーブル)の横一行を定義する |
<th> | 表(テーブル)の見出しとなるセルを作成する |
<td> | 表(テーブル)のセルを作成する |
<thead> | 表(テーブル)のヘッダー行を定義する |
<tbody> | 表(テーブル)の本体部分を定義する |
<tfoot> | 表(テーブル)のフッター行を定義する |