<col>表の列を示す

<col>タグは、<colgroup>内で、1列以上の列(column)を示します。 <col>は、<colgroup>のように表の縦列を意味的なグループ化するわけではありませんが、複数の縦列をまとめる事ができます。 そのため列内のセルに対してまとめてスタイルを適用したい場合にcol要素が使われます。

まとめる列数の指定はspan属性で設定します。 span属性を省略した場合は、1列を表します。 ただしcolgroup要素でspan属性を指定している場合は、colgroup要素内へcol要素を配置する事はできませんので注意して下さい。

なおcolgroup要素との違いですが、colgroup要素は<table>~</table>内へ配置できるのに対し、col要素は必ず<colgroup>~</colgroup>内へ入れる必要があります。

またcolgroup要素は縦列を意味的なグループ化するのに対し、col要素は列をグループ化するわけではありません。 そのため、その列グループ内での列を個別にスタイリングしたい場合に使用します。

HTML5での変更点

HTML5のcol要素では、width属性、align属性、valign属性、charoff属性、char属性が廃止されています。 またtable要素の直下に配置する事はできなくなりました。

書式

  • <col 属性="値"> ……… 表の列を表す

属性

span="" まとめる列数を整数値で指定

使用した時の例

<table border="1">
<caption>登録データ</caption>
<colgroup span="1" class="sample1"></colgroup>
<colgroup>
<col span="2" class="sample2">
<col span="1" class="sample3">
</colgroup>
  <tr>
    <th>氏名</th>
    <th>住所</th>
    <th>電話番号</th>
    <th>id</th>
  </tr>
  <tr>
    <td>浜田</td>
    <td>東京都新宿区</td>
    <td>000-555-2654</td>
    <td>524A</td>
  </tr>
  <tr>
    <td>中之島</td>
    <td>北海道札幌</td>
    <td>256-444-9854</td>
    <td>58A4B</td>
  </tr>
</table>
.sample1 {background: #D8E0F0;}
.sample2 {background: white;}
.sample3 {background: red;}

ブラウザ上の表示例

登録データ
氏名 住所 電話番号 id
浜田 東京都新宿区 000-555-2654 524A
中之島 北海道札幌 256-444-9854 58A4B

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

形式 <col> カテゴリ なし
親要素 span属性を持たないcolgroup 子要素 なし
開始タグ 必須 終了タグ なし
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~