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

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

* Some parts of this feature may have varying levels of support.

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

試してみましょう

<table>  <caption>    Superheros and sidekicks  </caption>  <colgroup>    <col />    <col span="2" />    <col span="2" />  </colgroup>  <tr>    <td></td>    <th scope="col">Batman</th>    <th scope="col">Robin</th>    <th scope="col">The Flash</th>    <th scope="col">Kid Flash</th>  </tr>  <tr>    <th scope="row">Skill</th>    <td>Smarts, strong</td>    <td>Dex, acrobat</td>    <td>Super speed</td>    <td>Super speed</td>  </tr></table>

.batman {  background-color: #d7d9f2;}.flash {  background-color: #ffe8d4;}table {  border-collapse: collapse;  border: 2px solid rgb(140 140 140);  font-family: sans-serif;  font-size: 0.8rem;  letter-spacing: 1px;}caption {  caption-side: bottom;  padding: 10px;}th,td {  border: 1px solid rgb(160 160 160);  padding: 8px 6px;}td {  text-align: center;}

属性

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

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非推奨;

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

charoff非推奨;

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

valign非推奨;

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

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

メモ: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`