<colgroup> | HTMLタグリファレンス

概要・意味テーブル(表)のデータの列のグループを表します
カテゴリー
コンテンツモデルspan属性が設定されていればcolタグ、設定されていない場合は特になし
タグ省略はじめの子要素が col 要素かつ終了タグを省略した colgroup 要素が前にない場合省略可。 空白またはコメントが後にない場合も終了タグを省略可。

colgroupタグとは?

colgroupタグはテーブル(表)の列のグループを指定するタグです。

colgroupタグはtableタグの内部に配置する必要があります。

colgroupタグの基本の使い方と使用例

上記はcolgroupタグを使い、列のグループを定義しそのグループに対してclass属性を通して背景色を適用している例です。

colgroupタグの中のcolタグのspan属性に2を設定し、2列をグループ化し、2列毎に異なるクラス名を付与し背景色を赤と緑としています。

あわせて読みたい
<col>
HTMLのcolタグはテーブル(表)の縦列の属性をまとめて設定するためめのタグです。通常colgroupタグ内に配置されるタグです。colタグの使い方をサンプルコード付きで解説します。

colgroupタグの属性

colgroupタグでは他のタグと同様にグローバル属性を設定することが可能です。

また下記のような専用の属性を持っています。

span

正の整数を指定します。colgroupタグの対象となる列の数を設定します。span属性を与えない場合はcolgroupタグの子要素にcolタグを必ず配置しましょう。

また現在は非推奨となっていますが、下記の属性がこれまでcolgroupタグで設定することが可能でした。

align

セル内のデータの水平方向の配置を指定することが出来ます。

値には下記のいずれかを指定します。

  • left:左揃え
  • center:中央揃え
  • right:右揃え
  • justify:両端揃え
  • char:char属性で指定した文字を軸に、最小のオフセットで揃える

bgcolor

背景色を指定することが出来ます。もちろんCSSのbackground-colorプロパティで設定することも出来ます。

 

char

align属性がcharの場合に指定する軸となる文字。align属性がchar以外の場合はこの属性は無視されます。ただしcolgroupタグの中のcolタグの初期の設定値として利用されます。

charoff

char属性で指定した文字をセルの端からどの程度距離をとるかを指定する。数値で指定

valign

セル内のデータの垂直方向の配置を指定することが出来ます。

値には下記のいずれかを指定します。

  • baseline:文字のベースラインに揃える
  • bottom: セルの下端に配置
  • middle: セルの中央に配置
  • top: セルの上端に配置