path: root/files/ja/web/html/element/colgroup/index.html

---
title: <colgroup>
slug: Web/HTML/Element/colgroup
tags:
  - Element
  - HTML
  - HTML tabular data
  - Reference
  - Tables
  - Web
translation_of: Web/HTML/Element/colgroup
---
<div>{{HTMLRef}}</div>

<p><strong>HTML の <code>&lt;colgroup&gt;</code> 要素</strong>は、表内の列のグループを定義します。</p>

<div>{{EmbedInteractiveExample("pages/tabbed/colgroup.html","tabbed-taller")}}</div>

<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th>
   <td>なし</td>
  </tr>
  <tr>
   <th scope="row">許可されている内容</th>
   <td>{{htmlattrxref("span", "colgroup")}} 属性を与えた場合: なし。これは{{Glossary("empty element", "空要素")}}です。<br>
    span 属性を与えない場合: 0 個以上の {{HTMLElement("col")}} 要素。</td>
  </tr>
  <tr>
   <th scope="row">タグの省略</th>
   <td>最初の子要素が {{HTMLElement("col")}} 要素であり、かつ終了タグを省略した {{HTMLElement("colgroup")}} 要素が前にない場合は、開始タグを省略できます。<br>
    空白またはコメントが後にない場合は、終了タグを省略できます。</td>
  </tr>
  <tr>
   <th scope="row">許可されている親要素</th>
   <td>{{HTMLElement("table")}} 要素。{{HTMLElement("colgroup")}} は省略可能な {{HTMLElement("caption")}} 要素より後、かつ {{HTMLElement("thead")}}, {{HTMLElement("th")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("tr")}} の各要素より前に置かなければなりません。</td>
  </tr>
  <tr>
   <th scope="row">暗黙の ARIA ロール</th>
   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td>
  </tr>
  <tr>
   <th scope="row">許可されている ARIA ロール</th>
   <td>許可されている <code>role</code> なし</td>
  </tr>
  <tr>
   <th scope="row">DOM インターフェイス</th>
   <td>{{domxref("HTMLTableColElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes" name="Attributes">属性</h2>

<p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>を持っています。</p>

<dl>
 <dt>{{htmlattrdef("span")}}</dt>
 <dd>この属性は正の整数で、 <code>&lt;colgroup&gt;</code> 要素がまたがる列の数を示します。存在しない場合の既定値は <code>1</code> です。
 <div class="note"><strong>注:</strong> この属性は列グループの属性に適用され、それに関連付けられた CSS のスタイル付け規則には影響を与えず、さらに、列グループのメンバーのセルにも影響を与えません。
 <ul>
  <li><code>span</code> 属性は、1つ以上の <code>&lt;col&gt;</code> 要素が <code>&lt;colgroup&gt;</code> の中にある場合は許可されていません。</li>
 </ul>
 </div>
 </dd>
</dl>

<h3 id="Deprecated_attributes" name="Deprecated_attributes">非推奨の属性</h3>

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

<dl>
 <dt>{{htmlattrdef("align")}} {{deprecated_inline}}</dt>
 <dd>この列挙属性は、各列の内容物の水平方向の配置方法を制御します。以下の値が指定可能です。
 <ul>
  <li><code>left</code> : 内容物をセルの左側に揃えます。</li>
  <li><code>center</code> : 内容物をセル内で中央揃えにします。</li>
  <li><code>right</code> : 内容物をセルの右側に揃えます。</li>
  <li><code>justify</code>: 内容物がセル内で両端揃えになるように、テキストコンテンツに空白を挿入します。</li>
  <li><code>char</code> : テキストコンテンツを特定の文字に対して、最小のオフセットで揃えます。特定の文字は {{htmlattrxref("char", "col")}} 属性および {{htmlattrxref("charoff", "col")}} 属性で定義します。</li>
 </ul>

 <p>この属性が設定されていない場合は、<code>left</code> 値であるものとします。子孫の {{HTMLElement("col")}} 要素は自身の {{htmlattrxref("align", "col")}} 属性を使用して、この値を上書きできます。</p>

 <div class="note"><strong>注:</strong>

 <ul>
  <li>{{cssxref("text-align")}} プロパティを、 {{HTMLElement("colgroup")}} 要素を与えたセレクターに設定しようとしてはいけません。 {{HTMLElement("td")}} 要素は {{HTMLElement("colgroup")}} 要素の子孫ではないため、プロパティを継承しません。</li>
  <li>表で {{htmlattrxref("colspan", "td")}} 属性を使用していない場合は、列ごとに 1 つずつ <code>td:nth-child(an+b)</code> CSS セレクターを使用してください。a は表内の列数、b は表内の列の位置を示す序数です。このセレクターの後でのみ <code>text-align</code> プロパティを使用できます。</li>
  <li>値 <code>char</code> と同じ効果を得るには、CSS3 では {{cssxref("text-align")}} プロパティの値として {{htmlattrxref("char", "colgroup")}} の値を使用します。{{unimplemented_inline}}</li>
 </ul>
 </div>
 </dd>
 <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt>
 <dd>
 <p>表の背景色です。この属性は、列の各セルの背景色を定義します。 <a href="/ja/docs/Web/CSS/color_value#RGB_colors">6桁の16進数の RGB コード</a>の前に '<code>#</code>' が付いた形です。定義済みの<a href="/ja/docs/Web/CSS/color_value#Color_keywords">色キーワード</a>の一つも使用できます。</p>

 <p>同様の効果を得るには、 CSS の {{cssxref("background-color")}} プロパティを使用してください。</p>
 </dd>
 <dt>{{htmlattrdef("char")}} {{deprecated_inline}}</dt>
 <dd>この属性は、列グループ内の内容をある文字へ整列することを指定します。典型的な値としては、数字や金額を整列させようとするときのピリオド (.) があります。 {{htmlattrxref("align", "colgroup")}} が <code>char</code> に設定されていない場合、この属性は無視されますが、この列グループのメンバーである {{HTMLElement("col")}} の {{htmlattrxref("align", "col")}} の既定値として使用されます。</dd>
</dl>

<dl>
 <dt>{{htmlattrdef("charoff")}} {{deprecated_inline}}</dt>
 <dd>この属性は、<code>char</code> 属性で指定した揃え文字から列のデータをオフセットする文字数を示します。</dd>
</dl>

<dl>
 <dt>{{htmlattrdef("valign")}} {{deprecated_inline}}</dt>
 <dd>この属性は、各列の内容物の垂直方向の配置方法を制御します。以下の値が指定可能です。
 <ul>
  <li><code>baseline</code> : テキストを可能な限りセルの下端に近づけますが、下端ではなく文字の <a class="external" href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">ベースライン</a> に揃えます。文字がサイズ全体に渡る場合は、<code>bottom</code> と同じ効果になります。</li>
  <li><code>bottom</code> : テキストを可能な限りセルの下端に近づけて配置します。</li>
  <li><code>middle</code> : テキストをセルの中央部に置きます。</li>
  <li>and <code>top</code> : テキストを可能な限りセルの上端に近づけて配置します。</li>
 </ul>

 <div class="note"><strong>注:</strong>

 <ul>
  <li>{{cssxref("vertical-align")}} プロパティを、 <code>&lt;colgroup&gt;</code> 要素を与えたセレクターに設定しようとしてはいけません。{{HTMLElement("td")}} 要素は <code>&lt;colgroup&gt;</code> 要素の子孫ではないため、プロパティを継承しません。</li>
  <li>表で {{htmlattrxref("colspan", "td")}} 属性を使用していない場合は、<code>td:nth-child(an+b)</code> CSS セレクターを使用してください。 a は表の列数、 b は表内の列の位置を示す序数です。このセレクターの後でのみ <code>vertical-align</code> プロパティを使用できます。</li>
  <li>表で {{htmlattrxref("colspan", "td")}} 属性を使用している場合は <code>[colspan=n]</code> のような、十分な CSS 属性セレクターの組み合わせで実現できますが、容易ではありません。</li>
 </ul>
 </div>
 </dd>
</dl>

<h2 id="Examples" name="Examples">例</h2>

<p><code>&lt;colgroup&gt;</code> 要素の使用例については、{{HTMLElement("table")}} 要素のページを参照してください。</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'tables.html#the-colgroup-element', '&lt;colgroup&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-colgroup-element', '&lt;colgroup&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'tables.html#edef-COLGROUP', '&lt;colgroup&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("html.elements.colgroup")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li><code>&lt;col&gt;</code> 要素のスタイル付けに特に便利な CSS プロパティおよび <a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>:

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