<col要素> - 列のグループの小さい単位
公開日:
col要素は、列のグループをさらに小さい単位に分けるために利用する要素です。colgroup要素の子要素として利用します。
概要
- 名前
- col (Column)
- カテゴリー
- なし。
- 配置できる場所
- span属性を持たないcolgroup要素の子要素として配置できる。
- コンテンツモデル
- 空要素のため、子ノードを持ちません。
- タグの省略
- 省略できません。
- DOM Interface
- HTMLTableColElement
- デフォルトのスタイル
col { display: table-column; }
- 仕様書
- https://html.spec.whatwg.org/multipage/tables.html#the-col-element
属性
span
何列分の列か、数値を指定する。
グローバル属性
全てのタグで利用できるグローバル属性を指定できます。
説明
col要素の説明は、colgroup要素を理解していることが前提となります。colgroup要素が大グループだとすると、col要素は小グループになります。col要素は、span属性を持たないcolgroup要素の子要素として配置して下さい。col要素のspan属性値の合計数が、colgroup要素(大グループ)の列数となります。
HTML
<!-- 10列あるテーブルの場合の一例 (2つの大グループ) -->
<!-- 先頭から6列 (1〜6列目) -->
<colgroup>
<col span="2"><!-- 1〜2列目 -->
<col span="4"><!-- 3〜6列目 -->
</colgroup>
<!-- 4列 (7〜10列目) -->
<colgroup>
<col span="1"><!-- 7列目 -->
<col span="2"><!-- 8〜9列目 -->
<col span="1"><!-- 10列目 -->
</colgroup>
下記は大グループを太い枠で囲って、小グループを背景色で分けた例です。
HTML
<table>
<!-- 列をグループ化 -->
<colgroup class="aaa">
<col span="2" class="bbb"><!-- 1〜2列目 -->
<col span="4" class="ccc"><!-- 3〜6列目 -->
</colgroup>
<!-- 4列 (7〜10列目) -->
<colgroup class="aaa">
<col span="1" class="ddd"><!-- 7列目 -->
<col span="2" class="eee"><!-- 8〜9列目 -->
<col span="1" class="fff"><!-- 10列目 -->
</colgroup>
<!-- 1つ目の行 -->
<tr>
<!-- 10列 -->
<td>AAA</td><td>BBB</td><td>CCC</td><td>DDD</td><td>EEE</td><td>FFF</td><td>GGG</td><td>HHH</td><td>III</td><td>JJJ</td>
</tr>
<!-- 2つ目の行 -->
<tr>
<!-- 10列 -->
<td>KKK</td><td>LLL</td><td>MMM</td><td>NNN</td><td>OOO</td><td>PPP</td><td>QQQ</td><td>RRR</td><td>SSS</td><td>TTT</td>
</tr>
</table>
CSS
table {
border-collapse: collapse ; /* borderを適用するのに必要 */
}
.aaa {
border: 12px solid #000 ;
}
.bbb {
background-color: red ;
}
.ccc {
background-color: blue ;
}
.ddd {
background-color: green ;
}
.eee {
background-color: orange ;
}
.fff {
background-color: purple ;
}
サンプルコード
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>【デモ】<col要素> - 列のグループの小さい単位</title>
<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/col/">
<style>
body {
background-color: #fff ;
}
table, th, td {
border: 1px solid #000 ;
color: #fff ;
}
table {
border-collapse: collapse ;
}
.aaa {
border: 12px solid #000 ;
}
.bbb {
background-color: red ;
}
.ccc {
background-color: blue ;
}
.ddd {
background-color: green ;
}
.eee {
background-color: orange ;
}
.fff {
background-color: purple ;
}
</style>
</head>
<body>
<p>col要素は、小グループを作るための要素です。colgroup要素の子要素として配置して下さい。</p>
<p>大グループを太い枠線で囲み、小グループを色分けしています。</p>
<table>
<!-- 列をグループ化 -->
<!-- 先頭から6列 (1〜6列目) -->
<colgroup class="aaa">
<col span="2" class="bbb"><!-- 1〜2列目 -->
<col span="4" class="ccc"><!-- 3〜6列目 -->
</colgroup>
<!-- 4列 (7〜10列目) -->
<colgroup class="aaa">
<col span="1" class="ddd"><!-- 7列目 -->
<col span="2" class="eee"><!-- 8〜9列目 -->
<col span="1" class="fff"><!-- 10列目 -->
</colgroup>
<!-- 1つ目の行 -->
<tr>
<!-- 10列 -->
<td>AAA</td><td>BBB</td><td>CCC</td><td>DDD</td><td>EEE</td><td>FFF</td><td>GGG</td><td>HHH</td><td>III</td><td>JJJ</td>
</tr>
<!-- 2つ目の行 -->
<tr>
<!-- 10列 -->
<td>KKK</td><td>LLL</td><td>MMM</td><td>NNN</td><td>OOO</td><td>PPP</td><td>QQQ</td><td>RRR</td><td>SSS</td><td>TTT</td>
</tr>
</table>
</body>
</html>