webmas.jp

<colgroup> は表内の列のグループ化を定義します。

分類

なし

内包できるもの

span 属性を指定した時：空,　span 属性を指定しない時：col 要素

属性

span=””

グループ化する列数

グループ化する列数

<colgroup> 要素に対し span 属性を指定し、複数の列をまとめることが可能です。省略した場合は span=”1″ が自動的に設定され1列になります。<colgroup> 内に <col> 要素がある場合は指定できません。

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

サンプル

<table>
 	<caption>表題</caption>
 	<colgroup span="1" class="group_00"></colgroup>
	<colgroup span="2" class="group_01"></colgroup>
 	<colgroup span="2" class="group_02"></colgroup>
 	<tbody>
 		<tr>
	 		<td></td>
 	 		<th scope="col">列1</th>
	 	 	<th scope="col">列2</th>
 	 	 	<th scope="col">列3</th>
	  		<th scope="col">列4</th>
	 	</tr>
 	 	<tr>
 	 	 	<th scope="row">行1</th>
 	 	 	<td>データ1</td>
 	 	 	<td>データ2</td>
 	 	 	<td>データ3</td>
 	 	 	<td>データ4</td>
 	 	</tr>
 	</tbody>
</table>

グループが分かりやすいように CSS を適用してみます。

.group_01 {
background-color: #ccffff;
}

.group_02 {
background-color: #ffccff;
}

プレビュー

表題

	列1	列2	列3	列4
行1	データ1	データ2	データ3	データ4