<COL>テーブルの列に属性を指定

<COL>は「Column」の略称で、<COLGROUP>~</COLGROUP>内の縦列を表します。 これによりテーブル(表)の縦列を構造的にグループ化することなく、テーブル(表)内の縦列に対して幅や行揃えなどの属性やスタイルシートの設定をまとめて適用できるようになります。 ですので、縦列に対しての指定をまとめて行いたい際には<COL>を使用します。

ただし<COLGROUP>のように列を(構造的な意味で)グループ化する働きはありません。

※<COL>との違いは<COLGROUP>が表の縦列を構造的な意味でグループ化するのに対し、<COL>は構造的にグループ化できるわけではありません。

両者の使い分けとしては、縦列をグループ化したい場合は<COLGROUP>を、グループ内の個々の列について指定したい場合は<COL>を使います。

また<COL>タグを配置する位置は、<TABLE>内の<CAPTION>の直後で、<THEAD><TR>よりも前になるように配置して下さい。

<CAPTION>がなければ<TABLE>の直後となります。

なお<COLGROUP>がある場合は、その内容としても配置できます。

またspan属性を使う事で、列をまとめる事ができます。 例えばspan="3"とすれば、3列(横)をまとめることが可能です。 下記のサンプルでいえば「シーバス、イナダ、サワラ」の3列がまとめられています。

ちなみにこの属性が省略された場合は「1」が指定されたものとみなされます。

使用した時の例

<table border="2">
<caption>今日の釣果</caption>
 <col id="place">
 <col id="time">
 <col span="3" id="count" width="100">
  <tr>
     <th>釣り場</th><th>日付</th><th>シーバス</th><th>イナダ</th><th>サワラ</th>
  </tr>
  <tr>
     <td>西港</td><td>5/6</td><td>1</td><td>12</td><td>6</td>
  </tr>
  <tr>
     <td>新川漁港</td><td>5/20</td><td>3</td><td>25</td><td>18</td>
  </tr>
</table>
#place{ background: red;}
#time{ background: pink;}
#count{ background: gold;}

ブラウザ上の表示例

今日の釣果
釣り場日付シーバスイナダサワラ
西港5/61126
新川漁港5/2032518
col表示例のそれぞれの領域について
<table border="2">
<caption>今日の釣果</caption>
 <colgroup>
   <col id="place">
   <col id="time">
 </colgroup>
 <colgroup span="3" id="count" width="100"></colgroup>
  <tr>
     <th>釣り場</th><th>日付</th><th>シーバス</th><th>イナダ</th><th>サワラ</th>
  </tr>
  
<!--以下省略-->

<!--
colgroup内にcolを配置した例です。
この場合でも上記の表示例と全く同じように表示されます
-->

属性

span="整数" まとめる列数を1,2,3…などの整数で指定。記述しない場合は「1」が指定されたものとみなされる
width="" グループ内の列の横幅をピクセル数、パーセント、比率を表す「∗(アスタリスク)」、または必要最小限の幅を表す「0∗」で指定。

※HTML5では廃止

align="行揃え" セル内の行揃えの位置を下記から指定
  • left・・・左揃え(tdの初期値)
  • right・・・右揃え
  • center・・・中央揃え(thの初期値)
  • justify・・・両端揃え
  • char・・・指定文字揃え
valign="縦位置" セル内の縦方向の位置を下記から指定
  • top・・・上
  • middle・・・中央(初期値)
  • bottom・・・下
  • baseline・・・横方向の列での1行目のベースライン
bgcolor="" 背景色の指定
char="" 位置を揃える文字の指定
charoff="" セルの左端からどの位置に文字を表示するか指定

対応ブラウザなどのデータ

形式 <col> カテゴリ なし
親要素 colgroup(span属性を持たない場合) 子要素 なし
開始タグ 必須 終了タグ なし
汎用属性 accesskey / class / contenteditable / dir / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer3~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~

HTML5での状況と関連情報

align、char、charoff、valign、width属性は、HTML5では廃止。