From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/html/element/colgroup/index.html | 183 ++++++++++++++++++++++++++ 1 file changed, 183 insertions(+) create mode 100644 files/ja/web/html/element/colgroup/index.html (limited to 'files/ja/web/html/element/colgroup/index.html') diff --git a/files/ja/web/html/element/colgroup/index.html b/files/ja/web/html/element/colgroup/index.html new file mode 100644 index 0000000000..89d4786c22 --- /dev/null +++ b/files/ja/web/html/element/colgroup/index.html @@ -0,0 +1,183 @@ +--- +title: +slug: Web/HTML/Element/colgroup +tags: + - Element + - HTML + - HTML tabular data + - Reference + - Tables + - Web +translation_of: Web/HTML/Element/colgroup +--- +
{{HTMLRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/tabbed/colgroup.html","tabbed-taller")}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
コンテンツカテゴリなし
許可されている内容{{htmlattrxref("span", "colgroup")}} 属性を与えた場合: なし。これは{{Glossary("empty element", "空要素")}}です。
+ span 属性を与えない場合: 0 個以上の {{HTMLElement("col")}} 要素。
タグの省略最初の子要素が {{HTMLElement("col")}} 要素であり、かつ終了タグを省略した {{HTMLElement("colgroup")}} 要素が前にない場合は、開始タグを省略できます。
+ 空白またはコメントが後にない場合は、終了タグを省略できます。
許可されている親要素{{HTMLElement("table")}} 要素。{{HTMLElement("colgroup")}} は省略可能な {{HTMLElement("caption")}} 要素より後、かつ {{HTMLElement("thead")}}, {{HTMLElement("th")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("tr")}} の各要素より前に置かなければなりません。
暗黙の ARIA ロール対応するロールなし
許可されている ARIA ロール許可されている role なし
DOM インターフェイス{{domxref("HTMLTableColElement")}}
+ +

属性

+ +

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

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

非推奨の属性

+ +

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

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

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

+ +
注: + +
    +
  • {{cssxref("text-align")}} プロパティを、 {{HTMLElement("colgroup")}} 要素を与えたセレクターに設定しようとしてはいけません。 {{HTMLElement("td")}} 要素は {{HTMLElement("colgroup")}} 要素の子孫ではないため、プロパティを継承しません。
    • +
  • 表で {{htmlattrxref("colspan", "td")}} 属性を使用していない場合は、列ごとに 1 つずつ td:nth-child(an+b) CSS セレクターを使用してください。a は表内の列数、b は表内の列の位置を示す序数です。このセレクターの後でのみ text-align プロパティを使用できます。
    • +
  • 値 char と同じ効果を得るには、CSS3 では {{cssxref("text-align")}} プロパティの値として {{htmlattrxref("char", "colgroup")}} の値を使用します。{{unimplemented_inline}}
    • +
+
+
+
{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}
+
+

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

+ +

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

+
+
{{htmlattrdef("char")}} {{deprecated_inline}}
+
この属性は、列グループ内の内容をある文字へ整列することを指定します。典型的な値としては、数字や金額を整列させようとするときのピリオド (.) があります。 {{htmlattrxref("align", "colgroup")}} が char に設定されていない場合、この属性は無視されますが、この列グループのメンバーである {{HTMLElement("col")}} の {{htmlattrxref("align", "col")}} の既定値として使用されます。
+
+ +
+
{{htmlattrdef("charoff")}} {{deprecated_inline}}
+
この属性は、char 属性で指定した揃え文字から列のデータをオフセットする文字数を示します。
+
+ +
+
{{htmlattrdef("valign")}} {{deprecated_inline}}
+
この属性は、各列の内容物の垂直方向の配置方法を制御します。以下の値が指定可能です。 +
    +
  • baseline : テキストを可能な限りセルの下端に近づけますが、下端ではなく文字の ベースライン に揃えます。文字がサイズ全体に渡る場合は、bottom と同じ効果になります。
    • +
  • bottom : テキストを可能な限りセルの下端に近づけて配置します。
    • +
  • middle : テキストをセルの中央部に置きます。
    • +
  • and top : テキストを可能な限りセルの上端に近づけて配置します。
    • +
+ +
注: + +
    +
  • {{cssxref("vertical-align")}} プロパティを、 <colgroup> 要素を与えたセレクターに設定しようとしてはいけません。{{HTMLElement("td")}} 要素は <colgroup> 要素の子孫ではないため、プロパティを継承しません。
    • +
  • 表で {{htmlattrxref("colspan", "td")}} 属性を使用していない場合は、td:nth-child(an+b) CSS セレクターを使用してください。 a は表の列数、 b は表内の列の位置を示す序数です。このセレクターの後でのみ vertical-align プロパティを使用できます。
    • +
  • 表で {{htmlattrxref("colspan", "td")}} 属性を使用している場合は [colspan=n] のような、十分な CSS 属性セレクターの組み合わせで実現できますが、容易ではありません。
    • +
+
+
+
+ +

例

+ +

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

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', 'tables.html#the-colgroup-element', '<colgroup>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'tabular-data.html#the-colgroup-element', '<colgroup>')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML4.01', 'tables.html#edef-COLGROUP', '<colgroup>')}}{{Spec2('HTML4.01')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.elements.colgroup")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf