colgroup要素

colgroup要素は、表（テーブル）の列（カラム）をグループ化する要素。

カテゴリー どのカテゴリーにも属さない。
コンテキスト table要素の子要素として使用できる。
ただし、caption要素より後ろで、thead要素、tfoot要素、 tbody要素、tr要素より前に配置しなければならない。
コンテンツ・モデル span属性がある場合： 空
span属性がない場合： ０個以上のcol要素やtemplate要素。
属性 グローバル属性。
span属性
ブラウザ対応

構文

span属性

span属性を使う方法。

<colgroup span="列数"></colgroup>

col要素

グループ化したい列の数だけ、col要素を配置する。

<colgroup>
	<col>
	<col>
	・
	・
	・
</colgroup>

もしくは、col要素のspan属性に列数を指定する。

<colgroup>
	<col span="列数">
</colgroup>

要点

  • colgroup要素は、表（テーブル）の列（カラム）をグループ化する要素である。
  • colgroup要素内に、col要素がなければ、colgroup要素にspan属性を指定できる。

属性

任意属性

属性 説明
span属性 グループ化する列の数を指定する属性。

サンプルコード

span属性

span属性を使い、１列目と２列目をグループ化、３列目と４列目と５列目をグループ化。

<table>
	<colgroup span="2"></colgroup>
	<colgroup span="3"></colgroup>
	<tr>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
	</tr>
	<tr>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
	</tr>
</table>

col要素

col要素を使い、１列目と２列目をグループ化、３列目と４列目と５列目をグループ化。

<table>
	<colgroup>
		<col>
		<col>
	</colgroup>
	<colgroup>
		<col>
		<col>
		<col>
	</colgroup>
	<tr>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
	</tr>
	<tr>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
	</tr>
</table>

サンプル

span属性

HTMLソースコード
<table border="1">
	<colgroup span="2" style="background-color: lime"></colgroup>
	<colgroup span="3" style="background-color: aqua"></colgroup>
	<tr>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
	</tr>
	<tr>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
	</tr>
</table>
実際の表示
データセル データセル データセル データセル データセル
データセル データセル データセル データセル データセル

col要素

HTMLソースコード
<table border="1">
	<colgroup style="background-color: lime">
		<col>
		<col>
	</colgroup>
	<colgroup style="background-color: aqua">
		<col>
		<col style="background-color: red">
		<col>
	</colgroup>
	<tr>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
	</tr>
	<tr>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
		<td>データセル</td>
	</tr>
</table>
実際の表示
データセル データセル データセル データセル データセル
データセル データセル データセル データセル データセル