col要素

col要素は、表（テーブル）において、colgroup要素でグループ化した列（カラム）のうちの、１つ以上の列（カラム）を表す要素。

カテゴリー どのカテゴリーにも属さない。
コンテキスト span属性を持たないcolgroup要素の子要素として使用できる。
コンテンツ・モデル 空。
属性 グローバル属性。
span属性。
ブラウザ対応

構文

col要素にspan属性を指定しない方法

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

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

col要素にspan属性を指定する方法

span属性に、col要素が表す列の数を指定できる。

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

要点

  • col要素は、表（テーブル）において、colgroup要素でグループ化した列（カラム）のうちの、１つ以上の列（カラム）を表す要素である。
  • span属性を持たないcolgroup要素の子要素として使用できる。

属性

任意属性

属性 説明
span属性 col要素が表す列の数を指定する属性。

サンプルコード

col要素にspan属性を指定しない方法

１つ目のcolgroup要素にcol要素を２つ配置し、２つ目のcolgroup要素に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>

col要素にspan属性を指定する方法

col要素にspan属性を指定し、１列目と２列目をグループ化、３列目と４列目と５列目をグループ化。

<table>
	<colgroup>
		<col span="2">
	</colgroup>
	<colgroup>
		<col 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要素にspan属性を指定しない方法

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>
実際の表示
データセル データセル データセル データセル データセル
データセル データセル データセル データセル データセル

col要素にspan属性を指定する方法

HTMLソースコード
<table border="1">
	<colgroup style="background-color: lime">
		<col span="2">
	</colgroup>
	<colgroup>
		<col 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>
実際の表示
データセル データセル データセル データセル データセル
データセル データセル データセル データセル データセル