HTML5タグ虎の巻

colgroupタグ

colgroupは、表の列をグループ化するタグです。

解説

colgroupタグは、表の列単位にスタイルを適用させるなどの使い方ができます。

コンテンツ・モデル

カテゴリー
(自カテゴリ)
なし
コンテキスト
(親カテゴリ)
tableタグ
コンテンツ・モデル
(子カテゴリ)
colタグ
※span属性が指定されている場合は子要素の指定不可

属性

colgroupタグには以下の属性が指定できます。

【属性】
属性説明
spanグループ化する列数を指定する
(例)span="2"
【主要グローバル属性】
属性説明
classクラスを指定する
(例)class="hoge"
idIDを指定する
(例)id="foo"
styleスタイルを指定する
(例)style="color:red;"
titleツールチップを指定する
(例)title="補足情報です"
tabindexTabキーによる移動の順番を指定する
 正数:指定した数値の順にフォーカス移動される
 負数:フォーカスは可能だが、タブ移動時はフォーカス対象とならない
(例)tabindex="10"

その他のグローバル属性値については、グローバル属性をご覧ください。

サンプル

左側2列の背景色を水色にする

<table>
  <colgroup span="2" style="background-color:skyblue;">
  <tr>
    <td>北海道</td><td>札幌市</td><td>1,952,255</td>
  </tr>
  <tr>
    <td>青森県</td><td>青森市</td><td>290,646</td>
  </tr>
</table>
北海道札幌市1,952,255
青森県青森市290,646

備考

  • colgroupは「column group」の略です。
  • colgroupに指定できないスタイルも存在します。(text-alignなど)

関連項目

  • table:表を作成する
  • tr:表の行を定義する
  • th:表のヘッダセルを定義する
  • td:表のセルを定義する
  • tbody:テーブルのメイン領域を表す
  • thead:テーブルのヘッダー行領域を表す
  • tfoot:テーブルのフッター行領域を表す
  • caption:表をのタイトルを指定する
  • colgroup:表の列をグループ化する
  • col:表の列を表す