colgroup要素

Updated / Published

colgroup要素(table column group)は、table要素内で用いて、表の複数の横列をまとめてグループ化（意味的なまとまりを構成）します。グループごとに横幅やテキストの揃え方の属性やスタイルシート(CSS)での見栄えをまとめて指定できます。

"<colgroup span="2"></colgroup>"のように列をまとめたり、内容にcol要素を含めて記述したりします。colgroup要素は「グループ分け+見栄え」を定義しますが、col要素は「見栄え」だけで特に意味を持っていません。colgroup要素は表を組むtable要素の中で並べる順番が決まっており、caption要素の次、thead要素やtr要素の前に置きます。

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
要素型
table要素の子要素
開始タグ
必須
終了タグ
  • XHTML 必須
  • HTML4.01 省略可
非推奨
-
内容モデル
col要素

align属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
指定要素
必須
-
非推奨
-
属性値
  • left
  • right
  • center
  • justify
  • char

colgroup要素でグループ化したセルに含まれる内容の幅寄せやテキストの桁揃えを指定します。行揃えの初期値は、td要素は "left" に 、th要素は "center"（Firefox は "left"）になっています。値には次の5つのキーワードがあります。大文字・小文字は区別されません。キーワードは半角アルファベットの大文字・小文字が区別されません（case-insensitive）。

left
内容とテキストを左揃えで表示する
right
内容とテキストを右揃えにする
center
内容とテキストを中央揃えにする
justify
文字を均等に配置し、テキストを両端揃えで表示する
char
char属性で指定した特定の文字を基準に揃えて表示する

align属性が有効なのは Internet Explorer のみです。HTML4.01, XHTML1.0, XHTML1.1のいずれにおいてもalign属性は非推奨ではありませんでしたが、HTML5ではcol要素のalign属性は廃止されました。本機能はCSSで代替することが推奨されており、td要素, th要素をセレクタに text-alignプロパティを指定することで同様の表現ができます。

char属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
指定要素
必須
-
非推奨
-
属性値
小数点

align属性の値に "char" を指定した場合にセル内の位置揃えの軸となる文字を指定します。たとえば、日本語や英語であればピリオド（.）、フランス語であればカンマ（,）のように lang属性（XHTML では xml:lnag属性）で指定した言語に対応する小数点を指定することが可能です。"<colgroup align="char" char="."></colgroup>" のように指定すれば、セル内の文字がピリオド（.）に合わせて揃えられることが期待されます。

仕様においてchar属性は、 UAは必ずしもこの機能をサポートする必要はないと定められています。このためchar属性を現状サポートするUAはなく、HTML5においてはcolgroup要素のchar属性は廃止されました。

charoff属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
指定要素
必須
-
非推奨
-
属性値
  • 整数（pixels）
  • パーセンテージ値（%）

char属性により位置揃えが指定された場合、charoff属性でその文字から水平方向にどの位置までずらして表示するかを指定します。たとえば、小数点以下2桁で揃えたい場合は、"<colgroup align="char" char="." charoff="2"></colgroup>" と指定します。

また、文字揃えの際にずらす方向は dir属性による書字方向に依存します。dir属性の値が "ltr" の場合、左の余白からずれます。dir属性の値が "rtl" の場合、右の余白からずれます。

仕様においてcharoff属性は、 UAは必ずしもこの機能をサポートする必要はないと定められています。このためcharoff属性を現状サポートするUAはなく、HTML5においてはcolgroup要素のcharoff属性は廃止されました。

span属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
指定要素
col, colgroup
必須
-
非推奨
-
属性値
整数（"1"以上）

colgroup要素でまとめる列数を "1" 以上の整数で指定します。まとめた列は colgroup要素で定義した全ての属性を共有します。初期値は "1" です。

width属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
指定要素
col、colgroup
必須
-
非推奨
-
属性値
  • 整数（pixels）
  • パーセンテージ値(%）
  • 相対比率（*）

colgroup要素でグループ化した各列のセルの横幅を指定します。span属性の値に "2" 以上が指定された場合は、複数の列のセル幅がそれぞれ width属性で指定された横幅で表示されます。Safari では span属性の値に "2" 以上が指定されると、width属性の指定は無効になります。colgroup要素の width属性は非推奨ではありませんが、CSS の widthプロパティで同様の表現に代替できます。

指定できる値は MultiLength となっています。これは整数（ピクセル数で解釈）、パーセンテージ値（%）の他に相対比率を指定することが可能であることを意味します。整数はピクセル数による固定、パーセンテージ値（%）は表示域の横幅に対する割合です。そして相対比率の指定とは、分割可能なセルについて、アスタリスク（*）のついた整数の比率に従って分配します。値が "*" の場合、これは "1*" として計測します。たとえば、整数指定のピクセル値とパーセント値を割り当て終え、残り 60px分の横幅の指定が可能で、"<colgroup width="*"></colgroup><colgroup width="2*"></colgroup><colgroup width="3*"></colgroup>" と分配した場合、1番目の "*" には 10px, 2番目の "2*" には 20px, "3*" には 30px が割り当てられることになります。

なお、HTML5においてはcolgroup要素のwidth属性は廃止されました。このため、HTML5では本機能は完全にCSSで代用します。

valign属性

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
指定要素
col, colgroup
必須
-
非推奨
-
属性値
  • top
  • middle
  • bottom
  • baseline

colgroup要素でグループ化したセルに含まれる内容の垂直（上下）方向の揃え方を指定します。値には次の4つのキーワードがあります。大文字・小文字は区別されません。キーワードは半角アルファベットの大文字・小文字が区別されません（case-insensitive）。

top
セルの上辺に内容の上辺を揃えて表示する
middle
セルの垂直方向の長さの中央に表示する
bottom
セルの下辺に内容の下辺を揃えて表示する
baseline
テキストの1行目をベースラインで揃えて表示する（2行目以降は影響なし）

valign属性が有効なのは Internet Explorer のみです。HTML4.01, XHTML1.0, XHTML1.1のいずれにおいてもalign属性は非推奨ではありませんでしたが、HTML5ではcol要素のvalign属性は廃止されました。本機能はCSSで代替することが推奨されており、td要素, th要素をセレクタに vertical-alignプロパティを指定することで同様の表現ができます。

その他の属性

共通属性
イベント属性

colgroup要素のサンプル

<table border="1">
<caption>保元の乱</caption>
<colgroup span="5" align="right"><col>
<col style="background:#f96;"><col style="background:#ffc;">
<col style="background:#9fc;"><col style="background:#69f;">
</colgroup>
<tr><th></th><th>天皇家</th><th>藤原氏</th><th>平氏</th><th>源氏</th></tr>
<tr><th>天皇方</th><td>後白河</td><td>忠通</td><td>清盛</td><td>義朝</td></tr>
<tr><th>上皇方</th><td>崇徳</td><td>頼長</td><td>忠正</td><td>為義</td></tr>
</table>