SYNCER

SYNCER

＜colgroup要素＞ - 列のグループ化

公開日:

colgroup要素は、列のグループを表す要素です。この要素を使えば、テーブルで、縦方向に串刺しにしてスタイルを適用できます。

概要

名前
colgroup (Column group)
カテゴリー
なし。
配置できる場所
table要素の子要素として、caption要素よりも後で、かつ、thead要素、tbody要素、tfoot要素、またはtr要素よりも前に配置すること。
コンテンツモデル
span属性を持つ場合、子要素を持ってはいけない。
span属性を持たない場合、0個以上のcol要素、および、template要素。
タグの省略
最初の子要素がcol要素で、かつ、終了タグを省略した別のcolgroup要素が直前に存在しない場合、開始タグを省略できる。
空白文字、またはコメントが後にない場合、終了タグを省略できる。
DOM Interface
HTMLTableColElement
デフォルトのスタイル
colgroup {
	display: table-column-group;
}
仕様書
https://html.spec.whatwg.org/multipage/tables.html#the-colgroup-element

属性

span

何列分の列か、数値を指定する。

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

基本的な使い方

colgroup要素を利用すると、列をグループ化できます。主な用途は、縦方向に串刺ししてスタイルを適用することです。使い方は簡単で、そのテーブルの列の合計数に一致するように、span属性に数値を振り分けていって下さい。colgroup要素の数だけグループができます。そして、このcolgroup要素に適用したスタイルが、列全体に適用されます。

HTML

<!-- 4列あるテーブルの場合の一例 (3つのグループ) -->
<colgroup span="2"></colgroup><!-- 先頭から2列分 (1列目と2列目) -->
<colgroup span="1"></colgroup><!-- 1列分 (3列目) -->
<colgroup span="1"></colgroup><!-- 1列分 (4列目) -->

<!-- 5列あるテーブルの場合の一例 (2つのグループ) -->
<colgroup span="1"></colgroup><!-- 先頭から1列分 (1列目) -->
<colgroup span="4"></colgroup><!-- 4列分 (2〜5列目) -->

table要素の、caption要素の直後、ない場合は先頭に配置して下さい。

HTML

<table>
	<!-- 列をグループ化 -->
	<colgroup span="2" class="aaa"></colgroup><!-- 先頭から2列分 (1〜2列目) -->
	<colgroup span="3" class="bbb"></colgroup><!-- 3列分 (3〜5列目) -->

	<!-- 1つ目の行 -->
	<tr>
		<!-- 5列 -->
		<td>AAA</td>
		<td>BBB</td>
		<td>CCC</td>
		<td>DDD</td>
		<td>EEE</td>
	</tr>

	<!-- 2つ目の行 -->
	<tr>
		<!-- 5列 -->
		<td>FFF</td>
		<td>GGG</td>
		<td>HHH</td>
		<td>III</td>
		<td>JJJ</td>
	</tr>
</table>

デモを開く

CSS

.aaa {
	background-color: red ;
}

.bbb {
	background-color: blue ;
}

グループ化した列に適用できるプロパティの種類には制限があります。これら以外のプロパティを指定しても適用されません。こういうものだと覚えておきましょう。

  • background
  • border (border-collapse: collapse;の場合のみ)
  • width
  • visibility

小さいグループ

colgroup要素でグループを作成して、そのグループの中で小グループを作ることができます。それにはcol要素を子要素に配置しましょう。col要素の仕組みはcolgroup要素と同じです。小グループを作る場合、colgroup要素はspan属性を持ってはいけない点にご注意下さい。子要素である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>【デモ】＜colgroup要素＞ - 列のグループ化</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/colgroup/">
		<style>
			body {
				background-color: #fff ;
			}

			table, th, td {
				border: 1px solid #000 ;
				color: #fff ;
			}

			.aaa {
				background-color: red ;
			}

			.bbb {
				background-color: blue ;
			}

			.ccc {
				background-color: green ;
			}
		</style>
	</head>
	<body>

<p>colgroup要素は、列をグループ化するための要素です。縦方向に串刺ししてスタイルシートを適用できます。</p>
<p>先頭から2列分を赤、1列分を青、1列分を緑、の背景色にしました。</p>

<table>
	<colgroup span="2" class="aaa"></colgroup><!-- 2列分 (1列目と2列目) -->
	<colgroup span="1" class="bbb"></colgroup><!-- 1列分 (3列目) -->
	<colgroup span="1" class="ccc"></colgroup><!-- 1列分 (4列目) -->

	<tr>
		<td>AAA</td>
		<td>BBB</td>
		<td>CCC</td>
		<td>DDD</td>
	</tr>

	<tr>
		<td>EEE</td>
		<td>FFF</td>
		<td>GGG</td>
		<td>HHH</td>
	</tr>

	<tr>
		<td>III</td>
		<td>JJJ</td>
		<td>KKK</td>
		<td>LLL</td>
	</tr>
</table>

	</body>
</html>

デモを開く

デモ

</head><body>までを含めて下さい。

<body> <div id="___body">

</div> <script>...</script> </body> </html>

<style>

</style>

<script>

</script>