<colgroup>: 表の列グループ要素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

<colgroup>HTML の要素で、表内の列のグループを定義します。

試してみましょう

属性

この要素にはグローバル属性があります。

span

この属性は正の整数で、<colgroup> 要素がまたがる列の数を示します。存在しない場合の既定値は 1 です。

span 属性は、1 つ以上の <col> 要素が <colgroup> の中にある場合は許可されません。

非推奨の属性

以下の属性は非推奨であり、使用すべきではありません。これらの属性は、既存のコードを更新する際の参考として、また歴史的な興味のためだけに、以下に文書化されています。

align 非推奨;

この列挙属性は、各列の内容物の水平方向の配置方法を制御します。以下の値が指定可能です。

  • left : 内容物をセルの左側に揃えます。
  • center : 内容物をセル内で中央揃えにします。
  • right : 内容物をセルの右側に揃えます。
  • justify: 内容物がセル内で両端揃えになるように、テキストコンテンツに空白を挿入します。
  • char : テキストコンテンツを特定の文字に対して、最小のオフセットで揃えます。特定の文字は char 属性および charoff 属性で定義します。

この属性が設定されていない場合は、left 値であるものとします。子孫の <col> 要素は自身の align 属性を使用して、この値を上書きできます。

メモ: text-align プロパティを、 <colgroup> 要素を与えたセレクターに設定しようとしてはいけません。 <td> 要素は <colgroup> 要素の子孫ではないため、プロパティを継承しません。

表で colspan 属性を使用していない場合は、列ごとに 1 つずつ td:nth-child(an+b) CSS セレクターを使用してください。a は表内の列数、b は表内の列の位置を示す序数です。このセレクターの後でのみ text-align プロパティが使用できます。

表で colspan 属性を使用している場合は [colspan=n] のような、十分な CSS 属性セレクターの組み合わせで実現できますが、容易ではありません。

bgcolor 非推奨;

表の背景色です。この属性は、列の各セルの背景色を定義します。 6 桁の 16 進数の RGB コードの前に '#' が付いた形です。定義済みの色キーワードの一つも使用できます。

同様の効果を得るには、 CSS の background-color プロパティを使用してください。

char 非推奨;

この属性は、列グループ内の内容をある文字へ整列することを指定します。典型的な値としては、数字や金額を整列させようとするときのピリオド (.) があります。 alignchar に設定されていない場合、この属性は無視されますが、この列グループのメンバーである <col>align の既定値として使用されます。

charoff 非推奨;

この属性は、char 属性で指定した揃え文字から列のデータをオフセットする文字数を示します。

valign 非推奨;

この属性は、各列の内容物の垂直方向の配置方法を制御します。以下の値が指定可能です。

  • baseline : テキストを可能な限りセルの下端に近づけますが、下端ではなく文字の ベースライン に揃えます。文字がサイズ全体に渡る場合は、bottom と同じ効果になります。
  • bottom : テキストを可能な限りセルの下端に近づけて配置します。
  • middle : テキストをセルの中央部に置きます。
  • and top : テキストを可能な限りセルの上端に近づけて配置します。

メモ: vertical-align プロパティを、 <colgroup> 要素を与えたセレクターに設定しようとしてはいけません。<td> 要素は <colgroup> 要素の子孫ではないため、プロパティを継承しません。

表で colspan 属性を使用していない場合は、td:nth-child(an+b) CSS セレクターを使用してください。 a は表の列数、 b は表内の列の位置を示す序数です。このセレクターの後でのみ vertical-align プロパティを使用できます。

表で colspan 属性を使用している場合は [colspan=n] のような、十分な CSS 属性セレクターの組み合わせで実現できますが、容易ではありません。

<colgroup> 要素の使用例については、<table> 要素のページを参照してください。

技術的概要

コンテンツカテゴリー なし
許可されている内容 span 属性が存在する場合: なし。
この属性がない場合: 0 個以上の <col> 要素。
タグの省略 最初の子要素が <col> 要素であり、かつ終了タグを省略した <colgroup> 要素が前にない場合は、開始タグを省略できます。
空白またはコメントが後にない場合は、終了タグを省略できます。
許可されている親要素 <table> 要素。<colgroup> は省略可能な <caption> 要素より後、かつ <thead>, <th>, <tbody>, <tfoot>, <tr> の各要素より前に置かなければなりません。
暗黙の ARIA ロール 対応するロールなし
許可されている ARIA ロール 許可されている role なし
DOM インターフェイス HTMLTableColElement

仕様書

Specification
HTML
# the-colgroup-element

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
colgroup
align
Deprecated
char
Deprecated
charoff
Deprecated
span
valign
Deprecated
width
Deprecated

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Deprecated. Not for use in new websites.
See implementation notes.

関連情報

  • <col> 要素のスタイル付けに特に便利な CSS プロパティおよび擬似クラス:

    • 列の幅を制御するための width プロパティ
    • 列内のセルの配置を設定するための :nth-child 擬似クラス
    • すべてのセル内コンテンツを '.' などの同一文字で揃えるための text-align プロパティ