Jun. 3rd,2015
＃
要素について
| カテゴリー | なし |
| 利用場所 | “table”要素の子要素として(ただし、“caption”要素の後、“thead”要素、“tbody”要素、“tfoot”要素や“tr”要素の前) |
| 内容 | “span”属性が指定されている場合は空 |
| “span”属性が指定されていない場合は0個以上の“col”要素や“template”要素 | |
| タグの省略 | 最初の内容が“col”要素で直前にあるのが終了タグを省略した“colgroup”要素ではない、もしくは要素が空の場合は開始タグを省略可能 |
| 直後に続くのがコメントでなければ終了タグを省略可能 |
“colgroup”要素は表の列をグループ化する要素です。
“colgroup”要素は親要素となる“table”要素で表される表の1列、もしくは複数の列をグループ化します。“colgroup”要素でグループ化される列の数は“span”属性の値、もしくは子要素となる“col”要素の数で指定できます。
表の同じ列のセルにまとめて同じスタイルを適用する場合などに使用できます。
“colgroup”要素と“col”要素は配置された順に表の列に関連付けられます。書字方向が左から右の場合は左側から順に列が関連付けられます。
表の行は“tr”要素で表されます。
サンプルコード
“span”属性を使用
<table>
<colgroup style=" background-color: rgb(218,193,171);"></colgroup>
<colgroup style=" background-color: rgb(251,196,204);" span="2"></colgroup>
<thead>
<tr>
<th>名前</th>
<th>漢字</th>
<th>英語</th>
<th>分類</th>
<th>産地</th>
<th>果実の色</th>
</tr>
</thead>
<tbody>
<tr>
<td>りんご</td>
<td>林檎</td>
<td>apple</td>
<td>バラ科リンゴ属</td>
<td>あおもり</td>
<td>あか</td>
</tr>
<tr>
<td>いちご</td>
<td>苺</td>
<td>strawberry</td>
<td>バラ科オランダイチゴ属</td>
<td>とちぎ</td>
<td>あか</td>
</tr>
<tr>
<td>もも</td>
<td>桃</td>
<td>peach</td>
<td>バラ科モモ属</td>
<td>やまなし</td>
<td>もも</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>名前</th>
<th>漢字</th>
<th>英語</th>
<th>分類</th>
<th>産地</th>
<th>果実の色</th>
</tr>
</tfoot>
</table>
| 名前 | 漢字 | 英語 | 分類 | 産地 | 果実の色 |
|---|---|---|---|---|---|
| りんご | 林檎 | apple | バラ科リンゴ属 | あおもり | あか |
| いちご | 苺 | strawberry | バラ科オランダイチゴ属 | とちぎ | あか |
| もも | 桃 | peach | バラ科モモ属 | やまなし | もも |
| 名前 | 漢字 | 英語 | 分類 | 産地 | 果実の色 |
“col”要素を使用
<table>
<colgroup style=" background-color: rgb(218,193,171);"></colgroup>
<colgroup>
<col style=" background-color: rgb(251,196,204);">
<col style=" background-color: rgb(251,196,204);">
</colgroup>
<thead>
<tr>
<th>名前</th>
<th>漢字</th>
<th>英語</th>
<th>分類</th>
<th>産地</th>
<th>果実の色</th>
</tr>
</thead>
<tbody>
<tr>
<td>りんご</td>
<td>林檎</td>
<td>apple</td>
<td>バラ科リンゴ属</td>
<td>あおもり</td>
<td>あか</td>
</tr>
<tr>
<td>いちご</td>
<td>苺</td>
<td>strawberry</td>
<td>バラ科オランダイチゴ属</td>
<td>とちぎ</td>
<td>あか</td>
</tr>
<tr>
<td>もも</td>
<td>桃</td>
<td>peach</td>
<td>バラ科モモ属</td>
<td>やまなし</td>
<td>もも</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>名前</th>
<th>漢字</th>
<th>英語</th>
<th>分類</th>
<th>産地</th>
<th>果実の色</th>
</tr>
</tfoot>
</table>
| 名前 | 漢字 | 英語 | 分類 | 産地 | 果実の色 |
|---|---|---|---|---|---|
| りんご | 林檎 | apple | バラ科リンゴ属 | あおもり | あか |
| いちご | 苺 | strawberry | バラ科オランダイチゴ属 | とちぎ | あか |
| もも | 桃 | peach | バラ科モモ属 | やまなし | もも |
| 名前 | 漢字 | 英語 | 分類 | 産地 | 果実の色 |
＃
＃
仕様書
“colgroup”要素はHTML2.0の後に発行された“HTML Tables (RFC 1942)”から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。
DOMインターフェース
[Exposed=Window]
interface HTMLTableColElement : HTMLElement {
[HTMLConstructor] constructor();
[CEReactions] attribute unsigned long span;
// also has obsolete members
};
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);
colgroup {
unicode-bidi: isolate;
display: table-column-group;
}
colgroup[hidden] {
display: table-column-group;
visibility: collapse;
}
/* 文書の文字エンコーディングが ISO-8859-8 である場合 */
colgroup {
unicode-bidi: bidi-override;
}
