このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

colgroup”要素:表の列のグループ化

記事Jun. 3rd,2015
July 16th,2020
表の列をグループ化する要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

カテゴリー なし
利用場所 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 バラ科モモ属 やまなし もも
名前 漢字 英語 分類 産地 果実の色

属性と値

属性
属性 説明 説明
必須属性
なし
任意属性
グローバル属性
span="" グループ化する列の数 正の整数 グループ化する列の数

span”属性は“colgroup”要素がcol”要素を子要素に持たない場合に指定できます。

過去に定義されていた属性
属性
属性 説明 説明
width=""注意 列の横幅 正の整数 横幅のピクセル数
正の整数% 横幅の表示領域に対する割合
0* 列の内容が収まる最小幅
正の整数* 利用可能な横幅に対する相対比率

仕様書

colgroup”要素はHTML2.0の後に発行された“HTML Tables (RFC 1942)”から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

定義されている仕様書
HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<colgroup>
定義あり

定義あり

定義あり

定義あり

定義あり
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;
}
HTMLタグ辞書
HTMLタグ辞書
HTMLタグ辞書
HTMLタグ辞書
HTMLタグ辞書
HTMLタグ辞書
HTMLタグ辞書
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク