構文
<table>
：
<colgroup>
<col>
</colgroup>
：
<tbody>
：
</tbody>
</table>
説明文
<colgroup>タグは，表の列を一括して属性の設定を行う<col>タグをまとめて設定する。例えば，全ての<col>タグについて背景色を一括指定するといったことが可能だ。また，<col>タグ同様に<colgroup>タグ単体で利用することもできる。
また，<colgroup>と<col>で同じ要素を指定した場合は，<col>タグの要素が優先される。
サンプル
HTMLソース
<table border=2 align=center>
<caption>表の列の一括設定の例</caption>
<colgroup style="background-color:#ffa0ff;">
<col width="150" align="center">
<col width="100">
<col span="2" width="60" align="right">
</colgroup>
<tbody>
<tr>
<th>都道府県名</th>
<th>県庁所在地</th>
<th>面積<br>（km<sup>2</sup>）</th>
<th>人口<br>（万人）</th>
</tr>
<tr>
<td>東京都</td>
<td>新宿区</td>
<td>2188</td>
<td>1288</td>
</tr>
<tr>
<td>大阪府</td>
<td>大阪市</td>
<td>1898</td>
<td>883</td>
</tr>
<tr>
<td>愛知県</td>
<td>名古屋市</td>
<td>5165</td>
<td>738</td>
</tr>
<tr>
<td>福岡県</td>
<td>福岡市</td>
<td>4977</td>
<td>506</td>
</tr>
</tbody>
</table>
ブラウザ表示例
表の列の一括設定の例
| 都道府県名 |
県庁所在地 |
面積
（km2） |
人口
（万人） |
| 東京都 |
新宿区 |
2188 |
1288 |
| 大阪府 |
大阪市 |
1898 |
883 |
| 愛知県 |
名古屋市 |
5165 |
738 |
| 福岡県 |
福岡市 |
4977 |
506 |
対応状況
| HTML |
IE |
Firefox |
Opera |
| 4 strict |
4 Transitional |
5 |
6 |
7 |
2 |
3 |
8 |
9 |
| ○ |
○ |
○ |
○ |
○ |
○ |
○ |
○ |
○ |
要素，タグ
| タグ要素 |
テーブル要素 |
| 包括可能要素 |
<col>（任意） |
| タグ記述条件 |
開始タグ：必須 終了タグ：省略可 |
属性
よく利用する属性
| 属性 |
意味 |
対応 |
| HTML 4s |
HTML 4t |
その他 |
| align=配置位置 |
横方向における内容の配置位置を指定する。「left」で左揃え，「center」で中央揃え，「right」で右揃え，「justify」でセル内に均等になるように配置する。また，「char」を指定するとchar属性に従った配置を行う |
○ |
○ |
|
| span=列数 |
複数の列を横方向に連結する場合に，つなげる列数を指定する |
○ |
○ |
|
| width=幅 |
セルを表示する際の横幅を指定する。数値のみで指定すると単位がピクセルとなる。割合で指定する場合は「%」を末尾に付ける |
○ |
○ |
|
| valign=配置位置 |
セル内の縦方向における内容の配置位置を指定する。「top」でセルの上辺に揃え，「bottom」でセルの下辺に揃える。「middle」でセルの中央に配置する。また，「baseline」を指定すると，セル内の1行目をベース・ラインで揃える |
○ |
○ |
|
その他の属性
| 属性 |
意味 |
対応 |
| HTML 4s |
HTML 4t |
その他 |
| char=文字 |
セル内の内容を揃えるベースとなる文字を指定する。例えば，小数をセル内で利用している場合は，「.」を指定することで，桁数を合わせることができる |
○ |
○ |
|
| charoff=文字数 |
char属性で指定した文字から指定した文字分ずらした位置で揃える。例えば，小数点2桁目で揃えたい場合は「charoff="2"」と指定すればよい |
○ |
○ |
|
| class=クラス名 |
このタグのクラス名。CSSでスタイルを指定する場合などに利用される |
○ |
○ |
|
| dir=方向 |
タグ内の文字の表示方向。「ltr」を指定すると文字を左から右に，rtlを指定すると「右から左」に表示する。しかし，多くのWebブラウザでは，文字コードを自動判別し，自動的に表示方向を決定している。そのため，日本語を「rtl」と指定しても実際には左から右に表示される。強制的に並び替えを行いたい場合は<bdo>タグを利用する |
○ |
○ |
|
| id=ID |
タグのID。ダイナミックHTMLでタグを操作する場合や，Java Scriptでのタグの制御，個別にスタイルを指定する場合などに利用する |
○ |
○ |
|
| lang=言語 |
タグ内に記述した言語。例えば，日本語の場合は「ja」，英語の場合は「en」を指定する |
○ |
○ |
|
| style=スタイル |
タグのスタイル。スタイルの指定方法については「CSSの基本 (2) CSSの記述位置」を参照 |
○ |
○ |
|
| title=タイトル |
タグのタイトル。一般的にタグの補足情報を記述する。一般的なWebブラウザでは，タグ上にマウス・ポインタを乗せるとツール・チップにtitle属性に指定した内容を表示する |
○ |
○ |
|
マウスやキーボードの状況変化に関わる属性
| 属性 |
意味 |
対応 |
| HTML 4s |
HTML 4t |
その他 |
| onclick=スクリプト |
このタグに対応する表示結果にマウスの左ボタンをクリックした場合に，指定したスクリプトを実行する |
○ |
○ |
|
| ondblclick=スクリプト |
このタグに対応する表示結果にマウスの左ボタンをダブル・クリックした場合に，指定したスクリプトを実行する |
○ |
○ |
|
| onmousedown=スクリプト |
このタグに対応する表示結果にマウスのボタンで押下した場合に，指定したスクリプトを実行する |
○ |
○ |
|
| onmouseup=スクリプト |
このタグに対応する表示結果にマウスのボタンを離した場合に，指定したスクリプトを実行する |
○ |
○ |
|
| onmouseover=スクリプト |
このタグに対応する表示結果にマウス・ポインタが乗った場合に，指定したスクリプトを実行する |
○ |
○ |
|
| onmousemove=スクリプト |
このタグに対応する表示結果上でマウス・ポインタが動いた場合に，指定したスクリプトを実行する |
○ |
○ |
|
| onmouseout=スクリプト |
このタグに対応する表示結果にマウス・ポインタが外れた場合に，指定したスクリプトを実行する |
○ |
○ |
|
| onkeypress=スクリプト |
このタグに対応する表示結果にフォーカスした状態で，キーボードのキーを押下して離した場合に，指定したスクリプトを実行する |
○ |
○ |
|
| onkeydown=スクリプト |
このタグに対応する表示結果にフォーカスした状態で，キーボードのキーを押下した場合に，指定したスクリプトを実行する |
○ |
○ |
|
| onkeyup=スクリプト |
このタグに対応する表示結果にフォーカスした状態で，キーボードのキーから離した場合に，指定したスクリプトを実行する |
○ |
○ |
|
関連項目
