<COLGROUP>テーブルの縦列をグループ化

<COLGROUP>は「column group」の略称で、テーブル(表)の縦列を(構造的な意味で)グループ化することができます。

縦列をグループ化するには、<COLGROUP>とspan属性を使用します。 これによって複数の縦列に対して、まとめて幅や行揃えなどHTMLの属性を指定したり、スタイルシートを適用したりできるようになります。

また<COLGROUP>で設定したグループ内で、さらに縦列に対して個別の設定をしたい場合には<COL>を使用します。 その場合は<COLGROUP>でspan属性を指定せずに、<COL>側で指定するようにして下さい。

<COLGROUP>を配置する位置は、<TABLE>内の<CAPTION>の直後(ない場合は<TABLE>の直後)で、<THEAD><TR>よりも前の位置になるように配置して下さい。

また内容として配置できるのは<COL>のみとなります。

なおテーブル(表)の縦列をグループ化する際はspan属性を指定して下さい。 使い方はグループ化したい列数を1以上の整数で指定します。 span属性を記述しない場合は、「1」が設定されたものとみなされます。

また<COLGROUP>~</COLGROUP>内に<COL>を配置している場合は、この属性は無視されます。

使用した時の例

<table border="2">
<caption>今日の釣果</caption>
 <colgroup span="2" id="timeplace">
 <colgroup span="3" id="count" width="100">
  <tr>
     <th>釣り場</th><th>日付</th><th>タコ</th><th>シーバス</th><th>サワラ</th>
  </tr>
  <tr>
     <td>荻川漁港</td><td>5/6</td><td>2</td><td>1</td><td>6</td>
  </tr>
  <tr>
     <td>東港</td><td>5/20</td><td>1</td><td>5</td><td>16</td>
  </tr>
</table>
#timeplace{ background: red;}
#count{ background: gold;}

ブラウザ上の表示例

今日の釣果
釣り場日付タコシーバスサワラ
荻川漁港5/6216
東港5/201516

※赤色(red)の部分がid="timeplace"、黄色(gold)の部分がid="count"の範囲となります。

属性

span="整数" グループ化する列数を1,2,3…などの整数で指定。記述しない場合は「1」が指定されたものとみなされる
width="" グループ内の列の横幅をピクセル数、パーセント、比率を表す「∗(アスタリスク)」、または必要最小限の幅を表す「0∗」で指定。

※HTML5では廃止

align="行揃え" セル内の行揃えの位置を下記から指定
  • left・・・左揃え
  • right・・・右揃え
  • center・・・中央揃え
  • justify・・・両端揃え
  • char・・・指定文字揃え
valign="縦位置" セル内の縦方向の位置を下記から指定
  • top・・・上
  • middle・・・中央
  • bottom・・・下
  • baseline・・・横方向の列での1行目のベースライン
bgcolor="" 背景色の指定
char="" 位置を揃える文字の指定
charoff="" セルの左端からどの位置に文字を表示するか指定

対応ブラウザなどのデータ

形式 <colgroup>~</colgroup> カテゴリ なし
親要素 table 子要素 colまたはtemplate(span属性なしの場合)
開始タグ 必須 終了タグ 省略可能
汎用属性 accesskey / class / contenteditable / dir / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer3~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~

HTML5での状況と関連情報

span属性以外のalign、char、charoff、valign、widthは、HTML5では廃止。