いまさらHTML,CSS入門講座 | HTML5｜colgroup要素 - 表形式データ（Tabular data）-

いまさらHTML,CSS講座 > HTML5 > colgroup要素 - テーブル 表形式データ（Tabular data）-

colgroup要素

colgroup要素は、table要素のコンテンツの、1つ以上の列のグループを表します。

span属性

span属性を用いて、グループ化する列の数を指定することができます。値は、0より大きい負ではない整数です。

例a）すべての列を個々にグループ化しています。

セルの背景色色分け用のスタイルシート。
colgroup.group_a{
background: darkseagreen;
}
colgroup.group_b{
background: mediumseagreen;
}
colgroup.group_c{
background: olivedrab;
}
colgroup.group_d{
background: tomato;
}

本文。
<table border="1">
<caption>
<p>Appearing in a certain robot anime, is the name and model of the Mobile Suit.</p>
</caption>

<colgroup span="1" class="group_a"></colgroup>
<colgroup span="1" class="group_b"></colgroup>
<colgroup span="1" class="group_c"></colgroup>
<colgroup span="1" class="group_d"></colgroup>

<tr>
<th>ザクII</th>
<th>量産型ザクII</th>
<th>陸戦型ザクII</th>
<th>指揮官用ザクII（シャア専用ザク）</th>
</tr>
<tr>
<th>MS-06</th>
<td>MS-06F</td>
<td>MS-06J</td>
<td>MS-06S</td>
</tr>
</table>

表示）

例b）例aと同じ表で、2、3列目の量産型、陸戦型ザクIIの2列をグループ化しています。（1列目と4列目は個々の列としてグループ化。）

<colgroup span="1" class="group_a"></colgroup>
<colgroup span="2" class="group_b"></colgroup>
<colgroup span="1" class="group_d"></colgroup>

表示）

例c）例aと同じ表で、1、2列目のベースとなるザクII、量産型ザクIIの2列をグループ化しています。（3列目と4列目は個々の列としてグループ化。）

<colgroup span="2" class="group_a"></colgroup>
<colgroup span="1" class="group_c"></colgroup>
<colgroup span="1" class="group_d"></colgroup>

表示）

例d）例aと同じ表で、1、2、3列目のベースとなるザクII、量産型、陸戦型ザクIIの3列をグループ化しています。（4列目は個々の列としてグループ化。）

<colgroup span="3" class="group_a"></colgroup>
<colgroup span="1" class="group_d"></colgroup>

表示）