HTML

HyperText Markup Language colgroup element.

colgroup 要素

　colgroup要素は、Column group (カラム・グループ) を意味し、テーブル（表）の縦列（カラム）をグループ化する際に使用します。colgroup要素を使用すると、テーブル（表）内にある１つ以上の縦列をグループ化して、その縦列グループに対して class属性名を与えることが可能で、これをセレクタにして CSSを適用してスタイルをまとめて指定することができます。

colgroup要素の配置位置

　colgroup要素は、<table>〜</table> の間の、<caption>より後、<thead>・<tbody>・<tfoot>・<tr> より前に配置します。基本的には、「tableの captionの次」という覚え方でも問題なさそうです。

<table>
	<caption></caption>
	<colgroup></colgroup>
	<thead></thead>
	<tbody>
		<tr>
			<th></th>
			<td></td>
		</tr>
	</tbody>
	<tfoot></tfoot>
</table>

列数の指定方法

　グループ化する列数は、colgroup要素の span属性で指定するか、colgroup要素の中に col要素を配置して指定します。

　colgroup要素は span属性を持つ場合には空要素となり、子孫要素を含むことはできません。反対に span属性を持たない場合には、子要素として col要素と template要素を入れることが可能になります。

colgroup要素の span属性で指定する場合

　次の例では３列をグループ化しています。

<colgroup span="3"></colgroup>

　span属性を省略した場合は、１列をグループ化したことになります。

<colgroup></colgroup>

col要素で指定する場合

　col要素にも span属性があり、その属性で列数を指定することができます。次の例では４列を２グループ（２列：２列）にグループ化しています。

<colgroup>
	<col span="2">
	<col span="2">
</colgroup>

　col要素の span属性を省略した場合は、その col要素は１列を指定したことになります。したがって、次の例では３列を２グループ（１列：２列）にグループ化したことになります。

<colgroup>
	<col>
	<col span="2">
</colgroup>

　span属性には、グループ化する縦列の数を指定します。span属性の値に指定できるのは 0 より大きい正の整数で、負の数値を指定することはできません。

　colgroup要素で定義された列グループは、テーブルの構造上、何かしらの意味を持たなければいけません。スタイルのためだけに、この要素を利用することは避けましょう。

　次の例では、５列の表を３つのグループ（１列：２列：２列）に分けています。

<table>
	<colgroup span="1"></colgroup>
	<colgroup span="2"></colgroup>
	<colgroup span="2"></colgroup>
	<tbody>
		<tr>
			<th>グループA</th>
			<th colspan="2">グループB</th>
			<th colspan="2">グループC</th>
		</tr>
		<tr>
			<td>グループA</td>
			<td>グループB</td>
			<td>グループB</td>
			<td>グループC</td>
			<td>グループC</td>
		</tr>
		<tr>
			<td>グループA</td>
			<td>グループB</td>
			<td>グループB</td>
			<td>グループC</td>
			<td>グループC</td>
		</tr>
		<tr>
			<td>グループA</td>
			<td>グループB</td>
			<td>グループB</td>
			<td>グループC</td>
			<td>グループC</td>
		</tr>
	</tbody>
</table>

1. 最初が span="1" なので、縦列の１列目の１列がグループ化されます。
2. ２番目が span="2" なので、縦列の２列目〜３列目の２列がグループ化されます。
3. ３番目が span="2" なので、縦列の４列目〜５列目の２列がグループ化されます。

　colgroup要素を設定しただけでは見た目に何も変わりませんが、グループ化の指定を行なうと、グループ単位でスタイルを設定できるようになります。

<colgroup span="1" class="groupA"></colgroup>
<colgroup span="2" class="groupB"></colgroup>
<colgroup span="2" class="groupC"></colgroup>

table, td, th {
	/* 表を見やすくするためにボーダーを表示させる */
	border: 1px solid gray;
}

.groupA {
	background-color: #bbbbff;
}

.groupB {
	background-color: #bbffbb;
}

.groupC {
	background-color: #ffffbb;
}

HTML5へのバージョンアップによる変更点

　colgroup要素は、HTML5では align属性・char属性・charoff属性・valign属性・width属性が廃止され、span属性だけが残されています。

属性

　この要素はグローバル属性を持ちます。

span

この属性は、colgroup要素が及ぶ連続した列の数を示す正の整数を持ちます。指定しない場合のデフォルト値は１です。

この属性は縦列グループの属性に適用されるものであり、colgroup要素や縦列グループのメンバー列内のセルに関連づけた CSSスタイル規則には影響しません。

• colgroup要素内に１個以上の col要素がある場合は、span属性は許可されていません。

align 【 HTML5で廃止 】

この属性は最新の標準仕様で廃止された（サポートされていない）ため、使用しないでください。

• 値 left、center、right、justify と同じ効果を得る方法：
  • colgroup要素を与えたセレクターに text-alignプロパティを設定しようとしてはいけません。td要素は colgroup要素の子孫ではないため、プロパティを継承しません。
  • 表で colspan属性を使用しない場合は、列ごとに１つずつ td:nth-child(an+b) CSSセレクターを使用してください。a は表内の列数、b は表内の列の位置を示す序数です。このセレクターの後でのみ text-alignプロパティを使用できます。
  • 表で colspan属性を使用している場合は [ colspan=n ] のような、十分な CSS属性セレクターの組み合わせで実現できますが、容易ではありません。
• 値 char と同じ効果を得るには、CSS3では text-alignプロパティの値として char の値を使用します。

bgcolor 【 非推奨 】

使用上の注意：この属性は非標準であり Internet Explorerの一部バージョンしか実装していませんので、使用しないでください。

<colgroup>要素は CSSを使用してスタイルをつけましょう。bgcolor属性と同様の効果を与えるには、CSSの background-colorプロパティを適切な <td>要素で使用してください。

char 【 HTML5で廃止 】

この属性は最新の標準仕様で廃止された (サポートされていない) ため、使用しないでください。

char と同じ効果を得るには、CSSでは text-alignプロパティの値として char の値を使用します。

charoff 【 HTML5で廃止 】

この属性は最新の標準仕様で廃止された (サポートされていない) ため、使用しないでください。

valign 【 HTML5で廃止 】

この属性は最新の標準仕様で廃止された (サポートされていない) ため、使用しないでください。

• <colgroup>要素を与えたセレクターに vertical-alignプロパティを設定しようとしてはいけません。<td>要素は <colgroup>要素の子孫ではないため、プロパティを継承しません。
• 表で colspan属性を使用していない場合は、td:nth-child(an+b) CSSセレクターを使用してください。a は表の列数、b は表内の列の位置を示す序数です。このセレクターの後でのみ text-alignプロパティを使用できます。
• 表で colspan属性を使用している場合は [colspan=n] のような、十分な CSS属性セレクターの組み合わせで実現できますが、容易ではありません。

width 【 HTML5で廃止 】

この属性は、カレントの列グループ内の各列の既定の幅を指定します。標準的なピクセル値やパーセント値に加えて、この属性は特別な書式 0* も使用できます。これはグループ内の各列の幅を、列の内容物を保持するのに必要最小限の幅にします。0.5* のような幅の相対値も使用できます。

colgroup要素の概要

カテゴリー

該当なし

コンテンツ･モデル

span属性が指定された場合

なし。空要素となります。

span属性が指定されていない場合

0個以上の col要素と template要素を持つことが可能。

利用可能な場所

table要素の子として。ただし、caption要素より後ろで、thead要素、tbody要素、tfoot要素、tr要素より前に置かなければなりません。

開始タグの省略

colgroup要素の中で最初に col要素が来るか、または、終了タグが省略された別の colgroup要素が直前に来ていない場合、省略することが可能です。

終了タグの省略

スペース文字（空白）やコメントが直後になければ、省略することが可能です。

要素固有の属性

span

列グループに入れる列の数を指定します

標準的なスタイル

colgroup {
	display: table-column-group;
}

許可されている ARIAロール

なし

DOMインターフェイス

HTMLTableColElement

colgroup要素の使用例

colgroup要素のみで使用した例

<table>
	<colgroup span="2" class="groupA"></colgroup>
	<colgroup span="3" class="groupB"></colgroup>
	<tbody>
		<tr>
			<td>Data A</td>
			<td>Data B</td>
			<td>Data C</td>
			<td>Data D</td>
			<td>Data E</td>
		</tr>
		<tr>
			<td>Data A</td>
			<td>Data B</td>
			<td>Data C</td>
			<td>Data D</td>
			<td>Data E</td>
		</tr>
	</tbody>
</table>

table, td, th {
	/* 表を見やすくするためにボーダーを表示させる */
	border: 1px solid gray;
}

.groupA {
	background-color: #bbbbff;
}

.groupB {
	background-color: #bbffbb;
}

colgroup要素と col要素を組み合わせて使用した例

<table>
	<colgroup class="groupA">
		<col>
		<col>
	</colgroup>
	<colgroup class="groupB">
		<col>
		<col class="groupC">
		<col>
	</colgroup>
	<tbody>
		<tr>
			<td>Data A</td>
			<td>Data B</td>
			<td>Data C</td>
			<td>Data D</td>
			<td>Data E</td>
		</tr>
		<tr>
			<td>Data A</td>
			<td>Data B</td>
			<td>Data C</td>
			<td>Data D</td>
			<td>Data E</td>
		</tr>
	</tbody>
</table>

table, td, th {
	/* 表を見やすくするためにボーダーを表示させる */
	border: 1px solid gray;
}

.groupA {
	background-color: #bbbbff;
}

.groupB {
	background-color: #bbffbb;
}

.groupC {
	background-color: #ffffbb;
}

colgroup要素 + CSS

　文字を中央寄せや右寄せにしてみる。

<table>
	<colgroup class="groupD"></colgroup>
	<colgroup span="2" class="groupE"></colgroup>
	<tbody>
		<tr>
			<td style="text-align:center;">Data A</td>
			<td style="text-align:right;">Data B</td>
			<td>Data C</td>
		</tr>
		<tr>
			<td>Data A</td>
			<td>Data B</td>
			<td>Data C</td>
		</tr>
	</tbody>
</table>

.groupD {
	background-color: #bbbbff;
	width: 80px;
	text-align: center;
}

.groupE {
	background-color: #bbffbb;
	width: 80px;
	text-align: right;
}

　colgroup要素に対して CSSの text-alignを使用してもできませんでした。

　td要素に対して個別に text-alignを使用することは可能ですが、大きなテーブル（表）になると手間がかかってしまいます。

　そこで、CSSの構造疑似クラスである :nth-child(n)を使ってみました。

<table class="mytable">
	<colgroup class="groupD"></colgroup>
	<colgroup span="2" class="groupE"></colgroup>
	<tbody>
		<tr>
			<td>Data A</td>
			<td>Data B</td>
			<td>Data C</td>
		</tr>
		<tr>
			<td>Data A</td>
			<td>Data B</td>
			<td>Data C</td>
		</tr>
	</tbody>
</table>

.groupD {
	background-color: #bbbbff;
	width: 80px;
}

.groupE {
	background-color: #bbffbb;
	width: 80px;
}

.mytable td:nth-child(1) {
	text-align: center;
}

.mytable td:nth-child(2) {
	text-align: right;
}

.mytable td:nth-child(3) {
	text-align: right;
}

　こちらの方が、大きなテーブル（表）だった場合などのメンテナンス性を考えると有効なようです。

DOMでの参照方法

[window.]document.getElementById("【ID属性値名】")

追加が可能なイベントハンドラ属性

onClick イベント

クリック時の処理

onDblClick

オブジェクトがダブルクリックされたら処理を実行する

onKeyDown

キーが押されたら処理を実行する

onKeyPress

キーが押されている間処理を実行する

onKeyUp

キーが押されて離されたら処理を実行する

onmousedown

マウスボタンが押されたら処理を実行する

onMouseMove

マウスポインタがオブジェクト上を移動したら処理を実行する

onMouseOut

マウスポインタがオブジェクトから離れたら処理を実行する

onMouseOver

マウスポインタがオブジェクトに重なったら処理を実行する

onMouseUp

マウスボタンが離されたら処理を実行する