<colgroup>列をグループ化する

<colgroup>タグは、テーブル(表)の列をグループ化(column group)する事を表します。 <colgroup>グループを使用すると、列のグループが明確になり、CSSによるスタイリングをその縦列グループに対してまとめて指定する事などができるようになります。

<colgroup>はtable要素の子要素として、caption要素より後、<thead><tbody><tfoot><tr>よりも前に記述する必要があります。

またcolgroup要素にcol要素を含まない場合は、span属性でグループ化する列数を指定します。 この時その値には正の整数値を指定して下さい。 なおspan属性を指定する場合は、子要素を含む事はできませんが、指定しない場合は、子要素としてcol要素を含むことができます。

span属性を省略した場合は、1列をグループ化した事となります。

HTML5での変更点

HTML5のcolgroup要素では、width属性、align属性、charoff属性、valign属性、char属性が廃止されています。

書式

  • <colgroup 属性="値">~</colgroup> ……… テーブルの列をグループ化する

属性

span="" グループ化する縦列の数を1以上の整数で指定

使用した時の例

<table border="1">
<caption>登録データ</caption>
<colgroup span="1" class="group1"></colgroup>
<colgroup span="2" class="group2"></colgroup>
  <tr>
    <th>氏名</th>
    <th>住所</th>
    <th>電話番号</th>
  </tr>
  <tr>
    <td>浜田</td>
    <td>東京都新宿区</td>
    <td>000-555-2654</td>
  </tr>
  <tr>
    <td>中之島</td>
    <td>北海道札幌</td>
    <td>256-444-9854</td>
  </tr>
</table>
.group1 {background:#D8E0F0;}
.group2 {background:#fff;}

ブラウザ上の表示例

登録データ
氏名 住所 電話番号
浜田 東京都新宿区 000-555-2654
中之島 北海道札幌 256-444-9854

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

形式 <colgroup>~</colgroup> カテゴリ なし
親要素 table要素の最初の子要素 子要素 span属性がある場合は空、ない場合は0個以上のcol、またはtemplate
開始タグ 必須 終了タグ 省略可能
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~