<colgroup>

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

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

属性

この要素はグローバル属性を持ちます。

align 非推奨 HTML4.01 HTML5 で廃止
この列挙属性は、各列の内容物の水平方向の配置方法を制御します。以下の値が指定可能です。
  • left : 内容物をセルの左側に揃えます。
  • center : 内容物をセル内で中央揃えにします。
  • right : 内容物をセルの右側に揃えます。
  • justify: 内容物がセル内で両端揃えになるように、テキストコンテンツに空白を挿入します。
  • char : テキストコンテンツを特定の文字に対して、最小のオフセットで揃えます。特定の文字は char 属性および charoff 属性で定義します。未実装 (参照 バグ 2212)

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

メモ: この属性は最新の標準仕様で廃止された (サポートされていない) ため、使用しないでください。
  • 値 left、center、right、justify と同じ効果を得る方法:
    • <colgroup> 要素を与えたセレクターに text-align プロパティを設定しようとしてはいけません。<td> 要素は <colgroup> 要素の子孫ではないため、プロパティを継承しません。
    • 表で colspan 属性を使用していない場合は、列ごとに 1 つずつ td:nth-child(an+b) CSS セレクターを使用してください。a は表内の列数、b は表内の列の位置を示す序数です。このセレクターの後でのみ text-align プロパティを使用できます。
    • 表で colspan 属性を使用している場合は [colspan=n] のような、十分な CSS 属性セレクターの組み合わせで実現できますが、容易ではありません。
  • 値 char と同じ効果を得るには、CSS3 では text-align プロパティの値として char の値を使用します。未実装
bgcolor
この属性は、列グループに属する列の各セルの背景色を定義します。値は sRGB で定義された6桁の16進数値のいずれかで、先頭に '#' を付加します。16種類の定義済み色名称も使用できます:
  black = "#000000"   green = "#008000"
  silver = "#C0C0C0"   lime = "#00FF00"
  gray = "#808080"   olive = "#808000"
  white = "#FFFFFF"   yellow = "#FFFF00"
  maroon = "#800000"   navy = "#000080"
  red = "#FF0000"   blue = "#0000FF"
  purple = "#800080"   teal = "#008080"
  fuchsia = "#FF00FF"   aqua = "#00FFFF"
使用上の注意: この属性は非標準であり Internet Explorer の一部バージョンしか実装していませんので、使用しないでください: <colgroup> 要素は CSS を使用してスタイルをつけましょう。bgcolor 属性と同様の効果を与えるには、CSS の background-color プロパティを適切な <td> 要素で使用してください。
char 非推奨 HTML4.01, HTML5 で廃止
この属性は、列グループの中身をある文字で揃えることを指定します。典型的な値に、数値や金額を揃えようとするときのピリオド (.) があります。align 属性が char ではない場合はこの属性を無視しますが、列グループのメンバーである <col> 要素の align のデフォルト値としては使用されます。
メモ: この属性は最新の標準仕様で廃止された (サポートされていない) ため、使用しないでください。char と同じ効果を得るには、CSS3 では text-align プロパティの値として char の値を使用します。未実装
charoff 非推奨 HTML4.01, HTML5 で廃止
この属性は、char 属性で指定した揃え文字から列のデータをオフセットする文字数を示します。
メモ: この属性は最新の標準仕様で廃止された (サポートされていない) ため、使用しないでください。
span
この属性は、<colgroup> 要素が及ぶ連続した列の数を示す正の整数を持ちます。指定しない場合のデフォルト値は 1 です。
メモ: この属性は列グループの属性に適用されるものであり、colgroup 要素や列グループのメンバー列内のセルに関連づけた CSS スタイル規則には影響しません。
  • <colgroup> 要素内に 1 個以上の <col> 要素がある場合は、span 属性は許可されていません。
valign 非推奨 HTML4.01, HTML5 で廃止
この属性は、各列の内容物の垂直方向の配置方法を制御します。以下の値が指定可能です:
  • baseline : テキストを可能な限りセルの下端に近づけますが、下端ではなく文字の ベースライン に揃えます。文字がサイズ全体に渡る場合は、bottom と同じ効果になります。
  • bottom : テキストを可能な限りセルの下端に近づけて配置します。
  • middle : テキストをセルの中央部に置きます。
  • and top : テキストを可能な限りセルの上端に近づけて配置します。
メモ: この属性は最新の標準仕様で廃止された (サポートされていない) ため、使用しないでください。
  • <colgroup> 要素を与えたセレクターに vertical-align プロパティを設定しようとしてはいけません。<td> 要素は <colgroup> 要素の子孫ではないため、プロパティを継承しません。
  • 表で colspan 属性を使用していない場合は、td:nth-child(an+b) CSS セレクターを使用してください。 a は表の列数、 b は表内の列の位置を示す序数です。このセレクターの後でのみ text-align プロパティを使用できます。
  • 表で colspan 属性を使用している場合は [colspan=n] のような、十分な CSS 属性セレクターの組み合わせで実現できますが、容易ではありません。
width HTML5 で廃止
この属性は、カレントの列グループ内の各列の既定の幅を指定します。標準的なピクセル値やパーセント値に加えて、この属性は特別な書式 0* も使用できます。これはグループ内の各列の幅を、列の内容物を保持するのに必要最小限の幅にします。0.5* のような幅の相対値も使用できます。

例

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

仕様書

仕様書 状態 備考
HTML Living Standard
<colgroup> の定義		 現行の標準  
HTML5
<colgroup> の定義		 勧告  
HTML 4.01 Specification
<colgroup> の定義		 勧告  

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
colgroupChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
align
非推奨
Chrome ? Edge 完全対応 12Firefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 915
IE 完全対応 ありOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 915
Opera Android ? Safari iOS ? Samsung Internet Android ?
bgcolor
非推奨
Chrome ? Edge ? Firefox 未対応 なしIE 完全対応 ありOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android 未対応 なしOpera Android ? Safari iOS ? Samsung Internet Android ?
char
非推奨
Chrome ? Edge 完全対応 12Firefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 2212
IE 完全対応 ありOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 2212
Opera Android ? Safari iOS ? Samsung Internet Android ?
charoff
非推奨
Chrome ? Edge 完全対応 12Firefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 2212
IE 完全対応 ありOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 2212
Opera Android ? Safari iOS ? Samsung Internet Android ?
spanChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
valign
非推奨
Chrome ? Edge 完全対応 12Firefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 915
IE 完全対応 ありOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 915
Opera Android ? Safari iOS ? Samsung Internet Android ?
width
非推奨
Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

  • 他の表関連 HTML 要素: <caption>, <col>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>;
  • <col> 要素のスタイル設定に特に役立つであろう CSS プロパティと擬似クラス:
    • 列の幅を制御するための width プロパティ
    • 列内のセルの配置を設定するための :nth-child 擬似クラス
    • すべてのセル内コンテンツを '.' などの同一文字で揃えるための text-align プロパティ