| title | slug | l10n | ||
|---|---|---|---|---|
<col>: 表の列要素 |
Web/HTML/Element/col |
|
{{HTMLSidebar}}
<col> は HTML の要素で、表内の列を定義して、すべての一般セルに共通の意味を定義するために使用します。この要素は通常、{{HTMLElement("colgroup")}} 要素内にみられます。
{{EmbedInteractiveExample("pages/tabbed/col.html","tabbed-taller")}}
<col> では CSS を使用して列にスタイルを設定できますが、列に対して効果があるプロパティは限定されています（CSS 2.1 仕様書をご覧ください）。
この要素にはグローバル属性があります。
span- : この属性は正の整数で、
<col>要素がまたがる列の数を示します。存在しない場合、既定値は1です。
- : この属性は正の整数で、
以下の属性は非推奨であり、使用すべきではありません。これらの属性は、既存のコードを更新する際の参考として、また歴史的な興味のためだけに、以下に文書化されています。
-
align{{deprecated_inline}}-
: この列挙型属性は、各列の内容物の水平方向の配置方法を制御します。以下の値が指定可能です。
left: 内容物をセルの左側に揃えます。center: 内容物をセル内で中央揃えにします。right: 内容物をセルの右側に揃えます。justify: 内容物がセル内で両端揃えになるように、テキストコンテンツに空白を挿入します。
この属性が設定されていない場合、その値は
<col>要素が属する {{HTMLElement("colgroup")}} 要素のalign属性から継承します。それも存在しない場合は、left値であるものとします。メモ:
left、center、right、justifyの値と同じ効果を実現するために、{{cssxref("text-align")}} プロパティを<col>要素を与えたセレクターに設定しようとしないでください。{{HTMLElement("td")}} 要素は<col>要素の子孫ではないため、プロパティを継承しません。表で
colspan属性を使用していない場合は、CSS のtd:nth-child(an+b)セレクターを使用してください。aを 0 に、bを表内の列の位置を示す序数にします。例えばtd:nth-child(2) { text-align: right; }は、2 列目を右揃えにします。表で
colspan属性を使用している場合は、[colspan=n]のような、十分な CSS 属性セレクターの組み合わせで実現できますが、容易ではありません。
-
-
bgcolor{{Deprecated_inline}}-
: 表の背景色です。この属性は、列の各セルの背景色を定義します。 6 桁の 16 進数の RGB コードの前に '
#' が付いた形です。定義済みの色キーワードのうちの一つも使用できます。同様の効果を得るには、 CSS の {{cssxref("background-color")}} プロパティを使用してください。
-
-
char{{deprecated_inline}}- : この属性は、列内のセルで揃える文字を設定します。よく使用する値としては、数値や金額を揃えるときのピリオド (.) があります。
align属性がcharではない場合は、この属性は無視されます。
- : この属性は、列内のセルで揃える文字を設定します。よく使用する値としては、数値や金額を揃えるときのピリオド (.) があります。
-
charoff{{deprecated_inline}}- : この属性は、
char属性で指定された揃え文字からその列のデータをオフセットする文字数を示します。
- : この属性は、
-
valign{{deprecated_inline}}-
: この属性は、その列のそれぞれのセルの中にある内容物の垂直方向の配置方法を指定します。以下の値が指定可能です。
baseline: テキストを可能な限りセルの下端に近づけますが、下端ではなく文字のベースラインに揃えます。文字がサイズ全体に渡る場合は、bottomと同じ効果になります。bottom: テキストを可能な限りセルの下端に近づけて配置します。middle: テキストをセルの中央部に置きます。- and
top: テキストを可能な限りセルの上端に近づけて配置します。
メモ: {{cssxref("vertical-align")}} プロパティを
<col>要素を指定したセレクターに設定しようとしないでください。{{HTMLElement("td")}} 要素は<col>要素の子孫ではないため、プロパティを継承しません。表で
colspan属性を使用していない場合は、 CSS のtd:nth-child(an+b)セレクターを使用してください。a は表内の列数、b は表内の列の位置を示す序数です。このセレクターの後でのみvertical-alignプロパティを使用することができます。表で
colspan属性を使用している場合は[colspan=n]のような、十分な CSS 属性セレクターの組み合わせで実現できますが、容易ではありません。
-
-
width{{deprecated_inline}}- : この属性は、現在の列グループ内の各列に既定の幅を指定します。標準的なピクセル値やパーセント値に加えて、この属性は特別な書式である
0*も使用できます。これはグループ内の各列の幅を、列の内容物を保持するのに必要最小限の幅にします。5*のような幅の相対値も使用できます。
- : この属性は、現在の列グループ内の各列に既定の幅を指定します。標準的なピクセル値やパーセント値に加えて、この属性は特別な書式である
{{HTMLElement("table")}} ページに <col> 要素の使用例があります。
| コンテンツカテゴリー | なし |
|---|---|
| 許可されている内容 | なし。これは{{Glossary("void element", "空要素")}}です。 |
| タグの省略 | 開始タグは必須ですが、終了タグを置いてはいけません。 |
| 許可されている親要素 |
{{HTMLElement("colgroup")}} のみ。ただし開始タグが必須ではないため暗黙的に定義されることがあります。
{{HTMLElement("colgroup")}} 要素は span 属性を持っていてはいけません。
|
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | 許可されている role なし |
| DOM インターフェイス | {{domxref("HTMLTableColElement")}} |
{{Specifications}}
{{Compat}}
-
<col>要素のスタイル設定に特に役立つであろう CSS プロパティと擬似クラス:- 列の幅を制御するための {{cssxref("width")}} プロパティ
- 列内のセルの配置を設定するための {{cssxref(":nth-child")}} 擬似クラス
- すべてのセル内コンテンツを '.' などの同一文字で揃えるための {{cssxref("text-align")}} プロパティ