col要素とは

<col>要素は、tableテーブル columnカラムの略で、表のを表す要素です。なお、この<col>要素に指定できるCSSは限定されています。 17.3 Columns

意味・役割
(テーブル)の列を表す要素
利用できるバージョン(HTML4.01以降)
全てのバージョン
コンテンツ・カテゴリ
なし
(HTML5より前:なし)
コンテンツ・モデル(梱包できる要素)
空要素
この要素を配置できる親要素
<colgroup>要素のみ。
ただし、<colgroup>要素にspan属性が指定されている場合は配置できない。

col要素で使える属性

どの要素にでも使えるグローバル属性と以下の属性が使えます。

span属性

spanスパン属性は、<col>要素で列の数を指定する属性です。属性値には "1" 以上の数値を指定します。

<col span="列の数">
属性値
"1" 以上の数値
利用できるバージョン(HTML4.01以降)
全てのバージョン
使用例
<col span="2">

width属性 HTML5で廃止

widthウィズ属性は、列の横幅を指定する属性です。なお、この属性は視覚的な表現を行う属性で、HTML5で廃止になりました。同様の表現を行うには、CSSのwidth プロパティで行うようにしましょう。

<col width="列の幅" >
属性値
  • 整数: 画像の横幅(px)
  • パーセンテージ: 画像の割合
  • 相対値 "*": 相対比率
利用できるバージョン(HTML4.01以降)
HTML4.01、XHTML1.0、XHTML 1.1
使用例
<col width="2*">

align属性 XHTML1.1で廃止

alignアライン属性は、列内のセルに対してテキストの揃え方を指定する属性です。なお、この属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、CSSの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で廃止

valignブイアライン属性は、verticalバーティカル alignアラインの略で、 列内の垂直方向の揃え方を指定する属性です。なお、この属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、CSSの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で廃止

charキャラ属性は、characterキャラクターの略で、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で廃止

charoffキャラオフ属性は、characterキャラクター offsetオフセットの略で、 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で廃止

bgcolorビージーカラー属性は、backgroundバックグラウンド colorカラーの略で、行の背景色を指定する属性です。なお、この属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、CSSの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>&yen; 3,562,000</td>
      <td>&yen; 3,883,000</td>
      <td>&yen; 3,219,000</td>
    </tr>
    <tr>
      <th scope="rowgroup">大阪支店</th>
      <td>&yen; 2,947,000</td>
      <td>&yen; 2,284,000</td>
      <td>&yen; 3,480,000</td>
    </tr>
    <tr>
      <th scope="rowgroup">沖縄支店</th>
      <td>&yen; 1,394,000</td>
      <td>&yen; 1,400,000</td>
      <td>&yen; 1,938,000</td>
    </tr>
  </tbody>
</table>
ブラウザでの表示例

RERUN

仕様

HTML5.1
4.9.4. The col element
HTML5
4.9.4 The col element
HTML4.01
11.2.4 Column groups: the COLGROUP and COL elements

関連する要素