備忘録的プログラミングリファレンス

colgroup, col タグエレメント

 colgroup, col タグエレメントは、<table> エレメントの列ごとにスタイルシートを反映させることができる HTML タグエレメントです。
 列ごとに JavaScript による操作も行えるようにすることができます。中にコンテンツを入れることができない特殊なタグエレメントです。

 table エレメントでは <tr> によって行ごとに操作ができますが、列ごとには操作できません。
 colgroup、col タグエレメントは列ごとに操作することができ、列の幅を指定することや列ごとの背景色を指定することができます。

thead, tbody, tfoot タグエレメント
<table>
	<colgroup>
		<col span="1" style="width:5em;background-color: #0cc4f7">
		<col span="1" style="background-color: #e8faff">
	</colgroup>
	<tr><th>項目名</th><th>概要</th></tr>
	<tr><td>example</td><td>例えばを意味</td></tr>
	<tr><td>本題</td><td>本題の説明は必要</td></tr>
	<tr><td>その他</td><td>他のはなし</td></tr>
</table>
表示例
項目名概要
example例えばを意味
本題本題の説明は必要
その他他のはなし

 col タグは colgroup タグエレメントの子エレメントとして定義します。

 colgroup タグエレメントは <caption> エレメントの後、<tr> といった一覧のデータの前に定義します。

 colgroup タグエレメントのみで列を指定することもできます。

- ad -

属性

グローバル属性も持ちます。以下に主な属性のみを示します。

AttributeValueExtra information
classcssに使います。同名のclassは同じスタイルが適応されます。
span適応する列数

その他の属性は HTMLTableColElement を参照してください。

Example

 colgroup タグエレメントの表示例です。以下は編集ができ、動作確認ができます。

- ad -

JavaScript

 <colgroup> エレメントの定義については HTMLTableColElement を参照してください。