HTML の <colgroup>
要素は、表内の列のグループを定義します。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
コンテンツカテゴリ | なし |
---|---|
許可されている内容 | span 属性を与えた場合: なし。これは空要素です。span 属性を与えない場合: 0 個以上の <col> 要素。 |
タグの省略 | 最初の子要素が <col> 要素であり、かつ終了タグを省略した <colgroup> 要素が前にない場合は、開始タグを省略できます。空白またはコメントが後にない場合は、終了タグを省略できます。 |
許可されている親要素 | <table> 要素。<colgroup> は省略可能な <caption> 要素より後、かつ <thead> , <th> , <tbody> , <tfoot> , <tr> の各要素より前に置かなければなりません。 |
暗黙の ARIA ロール | 対応するロールなし |
許可されている ARIA ロール | 許可されている role なし |
DOM インターフェイス | HTMLTableColElement |
属性
この要素はグローバル属性を持っています。
span
- この属性は正の整数で、
<colgroup>
要素がまたがる列の数を示します。存在しない場合の既定値は1
です。注: この属性は列グループの属性に適用され、それに関連付けられた CSS のスタイル付け規則には影響を与えず、さらに、列グループのメンバーのセルにも影響を与えません。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
プロパティを使用できます。 - 値
char
と同じ効果を得るには、CSS3 ではtext-align
プロパティの値としてchar
の値を使用します。未実装
bgcolor
-
表の背景色です。この属性は、列の各セルの背景色を定義します。 6桁の16進数の RGB コードの前に '
#
' が付いた形です。定義済みの色キーワードの一つも使用できます。同様の効果を得るには、 CSS の
background-color
プロパティを使用してください。 char
- この属性は、列グループ内の内容をある文字へ整列することを指定します。典型的な値としては、数字や金額を整列させようとするときのピリオド (.) があります。
align
がchar
に設定されていない場合、この属性は無視されますが、この列グループのメンバーである<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>
要素のページを参照してください。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
HTML Living Standard <colgroup> の定義 |
現行の標準 | |
HTML5 <colgroup> の定義 |
勧告 | |
HTML 4.01 Specification <colgroup> の定義 |
勧告 |
ブラウザーの互換性
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
関連情報
<col>
要素のスタイル付けに特に便利な CSS プロパティおよび 擬似クラス:- 列の幅を制御するための
width
プロパティ - 列内のセルの配置を設定するための
:nth-child
擬似クラス - すべてのセル内コンテンツを '.' などの同一文字で揃えるための
text-align
プロパティ
- 列の幅を制御するための