col要素とは
<col>要素は、<col>要素に指定できるCSSは限定されています。
（17.3 Columns）
- 意味・役割
- 表（テーブル）の列を表す要素
- 利用できるバージョン（HTML4.01以降）
- 全てのバージョン
- コンテンツ・カテゴリ
-
なし
（HTML5より前：なし） - コンテンツ・モデル（梱包できる要素）
- 空要素
- この要素を配置できる親要素
-
<colgroup>要素のみ。
ただし、<colgroup>要素にspan属性が指定されている場合は配置できない。
col要素で使える属性
どの要素にでも使えるグローバル属性と以下の属性が使えます。
span属性
<col>要素で列の数を指定する属性です。属性値には "1" 以上の数値を指定します。
<col span="列の数">- 属性値
- "1" 以上の数値
- 利用できるバージョン（HTML4.01以降）
- 全てのバージョン
<col span="2">width属性 HTML5で廃止
width プロパティで行うようにしましょう。
<col width="列の幅" >- 属性値
-
- 整数： 画像の横幅（px）
- パーセンテージ： 画像の割合
- 相対値 "*"： 相対比率
- 利用できるバージョン（HTML4.01以降）
- HTML4.01、XHTML1.0、XHTML 1.1
<col width="2*">align属性 XHTML1.1で廃止
text-align プロパティで行うようにしましょう。
<col align="テキスト揃え方">- 属性値
-
- "left"： 左揃え
- "center"： 中央揃え
- "right"： 右揃え
- "justify"： 両端揃え （均等配置）
- "char"：
char属性で指定した文字で揃える
- 利用できるバージョン（HTML4.01以降）
- HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）
<col align="right">valign属性 XHTML1.1で廃止
vertical-align プロパティで行うようにしましょう。
<col valign="垂直方向の揃え方">- 属性値
-
- "top"： 上揃え
- "middle"： 中央揃え
- "bottom"： 下揃え
- "baseline"： ベースラインで揃える （1行目のみ）
- 利用できるバージョン（HTML4.01以降）
- HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）
<col valign="top">char属性 XHTML1.1で廃止
align属性で、"char" を指定した際、テキストを揃える文字を指定する属性です。
基本的には、小数点などを揃える為に使用する為、 "." （ピリオド）を指定します。なお、この属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、CSS3の:text-align プロパティで char の指定で行うようにしましょう。
<col char="テキストを揃える文字" align="char">- 属性値
- テキストを揃える文字
- 利用できるバージョン（HTML4.01以降）
- HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）
<col char="." align="char">charoff属性 XHTML1.1で廃止
char属性が指定された場合において、その文字の
オフセット （ずらす量）を指定する属性です。なお、この属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。
<col charoff="オフセットする文字数" char="テキストを揃える文字" align="char">- 属性値
-
- 整数： 画像の横幅（px）
- パーセンテージ： 画像の割合
- 利用できるバージョン（HTML4.01以降）
- HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）
<col align="char" char="." charoff="40">bgcolor属性 XHTML1.1で廃止
background-color プロパティで行うようにしましょう。
<col bgcolor="背景色">- 属性値
-
- "16進数RGB値"
- "カラーネーム"
- 利用できるバージョン（HTML4.01以降）
- HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）
<col bgcolor="#330000">col要素のサンプル
col要素を使った表の例<table border="1">
<caption>店舗別売上表<caption>
<colgroup>
<col>
<col span="3">
</colgroup>
<thead>
<tr>
<th>店舗;</th>
<th>2014</th>
<th>2015</th>
<th>2016</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="rowgroup">東京本店</th>
<td>¥ 3,562,000</td>
<td>¥ 3,883,000</td>
<td>¥ 3,219,000</td>
</tr>
<tr>
<th scope="rowgroup">大阪支店</th>
<td>¥ 2,947,000</td>
<td>¥ 2,284,000</td>
<td>¥ 3,480,000</td>
</tr>
<tr>
<th scope="rowgroup">沖縄支店</th>
<td>¥ 1,394,000</td>
<td>¥ 1,400,000</td>
<td>¥ 1,938,000</td>
</tr>
</tbody>
</table>RERUN
仕様
- HTML5.1
- 4.9.4. The col element
- HTML5
- 4.9.4 The col element