colgroup

提供: ASCII.jp HTMLリファレンス

ver.8~ ver.7~ ver.14~ ver.5.1~ ver.11.5~
意味 列のグループ化
読み方 コルグループ/カラム・グループ

カテゴリー

なし

親にできる要素/カテゴリー

table要素の最初の子要素として
ただし、caption要素の後で、かつthead/tbody/tfoot/tr要素の前

子にできる要素/カテゴリー

span属性がある場合は空
span属性がない場合は0個以上のcol要素

<colgroup 属性="値">~</colgroup>

属性 概要
span 整数値 グループ化する列数

グローバル属性

accesskey,class,contenteditable,contextmenu,dir,draggable,hidden,id,lang,spellcheck,style,tabindex,title

説明

 colgroup要素は、表の列をグループ化することを表します。

 colgroup要素にcol要素を含まない場合は、span属性で、グループ化する列数を指定できます。span属性には正の整数を指定します。

 グループ化した列に対して、まとめてスタイルを適用する場合、colgroup要素を使います。

サンプル

(body要素の内部)

<table border="1">
<colgroup span="1" class="number"></colgroup>
<colgroup span="3" class="data"></colgroup>
<thead>
<tr><th>番号</th><th>氏名</th><th>住所</th><th>電話番号</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>山田 太郎</td><td>東京都新宿区若松町X-XX</td><td>03-1234-XXXX</td></tr>
<tr><td>2</td><td>鈴木 花子</td><td>神奈川県横浜市港北区菊名X-XX-XX</td><td>045-234-XXXX</td></tr>
<tr><td>3</td><td>高橋 和夫</td><td>埼玉県さいたま市浦和区駒場X-XX-XX</td><td>048-345-XXXX</td></tr>
</tbody>
</table>

(スタイルシート)

.number { background-color : #ccffff }
.data { background-color : #ffffcc }

サンプル実行画像

よくある間違い、勘違い

 HTML5では、colgroupに指定できる属性はspan属性だけです。それ以外の属性(width属性など)は廃止されました。

Powered by Web Professional

目次