<colgroup> - テーブルのカラム設定

項目	説明
形式	<colgroup>～</colgroup>
サポート	H4+ / e3+ / N6+ / Fx1+ / Op6+ / Ch1+ / Sa1+
タグの省略	開始タグ：必須、終了タグ：省略可能
包含可能要素	col

colgroup は COLumn GROUP の略です。テーブルのカラム（列）グループに対して、横幅や右寄せ、左寄せなどの指定を行います。<colgroup> でカラムグループの設定を行い、加えて、<col> で個々のカラムの設定を行うこともできます。

IE4.0、Netscape 6 からサポートされましたが、Netscape 6.0 では width の指定のみ可能なようです。

■ 属性

【固有属性】

属性	意味
align=align	H4/e3+。表示位置を指定します。HTML5 では廃止されました。　　center：中央（H4/e3）　　char：指定した文字で揃える（H4）　　justify：均等割付（H4）　　left：左寄せ（H4/e3）　　right：右寄せ（H4/e3）
valign=valign	H4/e4+。縦方向の位置を指定します。HTML5 では廃止されました。　　baseline：ベースライン（H4/e4）　　bottom：下側（H4/e4）　　middle：中央（H4/e4）　　top：上側（H4/e4）
bgcolor=color	e3+。背景色を指定します。
char=char	H4。位置揃えする文字を指定します。HTML5 では廃止されました。
charoff=n	H4。char 属性で指定した文字を、セルの左端からどのくらいの位置に表示するかのオフセットを指定します。HTML5 では廃止されました。
span=n	H4+/e3+/N6+。例えば span=3 とすると、3列の指定を一度に行うことができます。<col> を包含する場合はこの属性は無視されます。
width=n	H4+/e4+/N6+。列の横幅を数値または"50%"のようなパーセンテージで指定します。

【一般属性】

属性	意味
class=class	H4+/e4+。クラスを指定します。
id=id	H4+/e4+。IDを指定します。
style=style	H4+/e4+。スタイルシートを指定します。
title=title	H4+。タイトルを指定します。
dir=dir	H4+/e5+。文字の表示方向を指定します。
lang=lang	H4+。言語を指定します。
accesskey=key	H5+。アクセスキーを指定します。
tabindex=n	H5+。タブインデックスを指定します。
contenteditable=bool	H5+/e55+。要素を編集可能にします。
contextmenu=id	H5+。コンテキストメニューを指定します。
draggable=bool	H5+。ドラッグを可能にします。
dropzone=value	H5+。ドロップを可能にします。
hidden	H5+。要素を非表示にします。
spellcheck=bool	H5+。スペルをチェックします。

■ 使用例

HTMLソース
<table border=1> <colgroup bgcolor="#e0e0e0" width=100 align="center"> </colgroup> <colgroup> <col span=1 width=50 align="center"> <col span=2 width=50 align="right"> </colgroup> <tr bgcolor="#e0e0e0"> <th align=center>名前</th> <th align=center>出身</th> <th align=center>Ａ値</th> <th align=center>Ｂ値</th> </tr> <tr><td>田中</td><td>東京</td><td>123</td><td>123</td></tr> <tr><td>鈴木</td><td>大坂</td><td>456</td><td>456</td></tr> <tr><td>佐藤</td><td>京都</td><td>789</td><td>789</td></tr> </table>

HTMLソース

<table border=1>
 <colgroup bgcolor="#e0e0e0" width=100 align="center">
 </colgroup>
 <colgroup>
  <col span=1 width=50 align="center">
  <col span=2 width=50 align="right">
 </colgroup>
 <tr bgcolor="#e0e0e0">
  <th align=center>名前</th>
  <th align=center>出身</th>
  <th align=center>Ａ値</th>
  <th align=center>Ｂ値</th>
 </tr>
 <tr><td>田中</td><td>東京</td><td>123</td><td>123</td></tr>
 <tr><td>鈴木</td><td>大坂</td><td>456</td><td>456</td></tr>
 <tr><td>佐藤</td><td>京都</td><td>789</td><td>789</td></tr>
</table>

ブラウザ表示例(※)

名前	出身	Ａ値	Ｂ値
田中	東京	123	12.3
鈴木	大坂	456	456
佐藤	京都	789	789

※ <col> や <colgroup> をサポートしていないブラウザでも表示可能なように別の方式で表示しています。

<colgroup> - テーブルのカラム設定

■ 概要

■ 説明

■ 属性

■ 使用例

■ 関連項目