colgroup要素 -- 列のグループ化

基本データ

colgroup要素
文書型 適用 子要素 開始タグ 終了タグ 分類
Strict ○ col要素 必須 省略可 table要素の子要素
Transitional ○
Frameset ○

属性

固有属性

span="グループ化する列数"
Strict: ○ | Transitional: ○ | Frameset: ○
たての列を何列分グループ化するかを指定します。値は1以上の整数です。省略した場合は1が指定されたものとみなされます。また、子要素にcol要素を含む場合、この指定は無効になります。
width="幅"
Strict: ○ | Transitional: ○ | Frameset: ○
グループ化された列の幅をまとめて設定します。値はピクセル値、パーセント値に加え「2*」のような相対値が使えます。また特別な形として必要最小の幅を表す「0*」が使えます。子要素のcol要素にwidth属性が設定されている場合は、col要素のwidth属性が優先されます。
CSSで代用
colgroup { width: 横幅; }
align="行揃え"
Strict: ○ | Transitional: ○ | Frameset: ○
同一グループに含まれるセルの行揃えをまとめて指定します。利用できる値は次のとおりです。
left
左揃え
center
中央揃え
right
右揃え
justify
両端揃え
char
char属性で指定された文字に揃える(デフォルトは小数点を表す文字)。対応しているブラウザがほとんどありません。
この属性は非推奨ではありませんが、CSSを使って次のように指定するほうが望ましいです。
左揃え
colgroup { text-align: left; }
中央揃え
colgroup { text-align: center; }
右揃え
colgroup { text-align: right; }
両端揃え
colgroup { text-align: justify; }
特定の文字で揃える(ピリオドの場合)
colgroup { text-align: "."; }
valign="垂直方向の位置揃え"
Strict: ○ | Transitional: ○ | Frameset: ○
セルの中身を垂直方向のどの位置にそろえるのかを指定します。利用できる値は次のとおりです。
top
上揃え
middle
中央揃え
bottom
下揃え
baseline
1行目の下端
この属性は非推奨ではありませんが、CSSを使って次のように指定するほうが望ましいです。
上揃え
colgroup { vertical-align: top; }
中央揃え
colgroup { vertical-align: middle; }
下揃え
colgroup { vertical-align: bottom; }
1行目の下端
colgroup { vertical-align: baseline; }
char="行を揃える文字"
Strict: ○ | Transitional: ○ | Frameset: ○
align="char"を指定したときに、どの文字で位置を揃えるのかを指定します。デフォルトでは小数点を表す記号(日本語ならピリオド)です。
charoff="セルの端からchar属性で示した文字までの空白"
Strict: ○ | Transitional: ○ | Frameset: ○
align="char"を指定したときに、セルの左端からそろえる文字までの距離をピクセル値かパーセント値で指定します。

解説

colgroup要素でたての列をグループに分けることができます。span属性で何列分をグループ化するかを指定します。colgroup要素はcaption要素の次に配置します。

colgroup要素やcol要素で列ごとにスタイルを設定することができます。

横の行をグループに分けるにはthead要素、tfoot要素、tbody要素を使います。

<table summary="2月?3月の光熱費。1列目が月、
2列目から4列目までがそれぞれ水道代、ガス代、電気代です。">
  <caption>光熱費</caption>
  <colgroup class="month"></colgroup><!-- 月の列 -->
  <colgroup span="3" class="data"></colgroup><!-- 水道代・ガス代・電気代の列 -->
  <thead>
    <tr>
      <th>月</th><th>水道代</th><th>ガス代</th><th>電気代</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>合計</td><td>10000円</td><td>7000円</td><td>8000円</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>2月</td><td>4000円</td><td>3000円</td><td>5000円</td>
    </tr>
  <tr>
    <td>3月</td><td>6000円</td><td>4000円</td><td>3000円</td>
  </tr>
  </tbody>
</table>
colgroup.month { background:  #d1edff; }
colgroup.data { background: #d8ffd1; }
光熱費
月水道代ガス代電気代
合計10000円7000円8000円
2月4000円3000円5000円
3月6000円4000円3000円

span属性でグループ化するたての列数を指定する代わりに、子要素に同じ数だけのcol要素を配置することもできます。上の例は次のように書いても同じ意味を表します。グループ化された列の属性を個別に指定したいときに有効です。

<table summary="2月?3月の光熱費。1列目が月、
2列目から4列目までがそれぞれ水道代、ガス代、電気代です。">
  <caption>光熱費</caption>
  <colgroup class="month"></colgroup><!-- 月の列 -->
  <colgroup class="data"><!-- 水道代・ガス代・電気代の列 -->
    <col class="water">
    <col class="gas">
    <col class="electricity">
  </colgroup>
      (略)

colgroup要素とcol要素の違い

colgroup要素もcol要素も似たような要素に思えますが、両者の役割は全く異なっています。colgroup要素は複数の列をグループに分け、列の属性を指定できる働きがあります。一方col要素は列の属性を指定できるだけでグループ化の機能はありません。

colgroup要素もcol要素もspan属性を持ちますが、span="3"と指定した場合、見た目に関する機能は同じでもその表す意味は異なってきます。まずはcol要素の場合です。

<table>
  <col span="3" class="foo">

col要素のspan属性は、極端に言えばcol要素の繰り返し回数です。上の例ではspan="3"なので、次のように同じcol要素を3個配置しても同じ意味を表します。

<table>
  <col class="foo">
  <col class="foo">
  <col class="foo">

次はcolgroupの場合です。

<table>
  <colgroup span="3" class="foo"></colgroup>

上の例のようにcolgroup要素にspan="3"を指定した場合、その3列が同じグループに属していることを表します。ですから次のように同じcolgroupを3個配置すると、それぞれの列が別のグループに属していることを表します。

<table>
  <colgroup class="foo"></colgroup>
  <colgroup class="foo"></colgroup>
  <colgroup class="foo"></colgroup>

Strict DTDの定義

<!ELEMENT COLGROUP - O (COL)*          -- table column group -->
<!ATTLIST COLGROUP
  %attrs;                              -- %coreattrs, %i18n, %events --
  span        NUMBER         1         -- default number of columns in group --
  width       %MultiLength;  #IMPLIED  -- default width for enclosed COLs --
  %cellhalign;                         -- horizontal alignment in cells --
  %cellvalign;                         -- vertical alignment in cells --
  >

Information

現在の位置