HTML5タグ虎の巻

colタグ

colは、表の列を表すタグです。

解説

colgroupの子要素として定義します。 colgroupは列をグループ化するタグで、colはグループ化された列1つ1つを表します。列に対してスタイルを指定したい場合などに使用します。
ただし、colに指定できないスタイル(text-alignなど)もあるのでご注意ください。

colに指定できないスタイルを指定したい場合は、CSSの疑似クラス「:nth-child(n)」の使用を検討してください。

コンテンツ・モデル

カテゴリー
(自カテゴリ)
なし
コンテキスト
(親カテゴリ)
colgroupタグ
コンテンツ・モデル
(子カテゴリ)
指定不可

属性

colタグには以下の属性が指定できます。

【属性】
属性説明
span対象列数を指定する
(例)span="2"
【主要グローバル属性】
属性説明
classクラスを指定する
(例)class="hoge"
idIDを指定する
(例)id="foo"
styleスタイルを指定する
(例)style="color:red;"
titleツールチップを指定する
(例)title="補足情報です"
tabindexTabキーによる移動の順番を指定する
 正数:指定した数値の順にフォーカス移動される
 負数:フォーカスは可能だが、タブ移動時はフォーカス対象とならない
(例)tabindex="10"

その他のグローバル属性値については、グローバル属性をご覧ください。

サンプル

colタグを使用して、列単位にスタイルを指定するサンプル

<table>
  <caption>人口ランキング</caption>
  <colgroup>
    <col span="1" style="width:50px; background-color:#f0f0ff;">
    <col span="2" style="width:150px; background-color:#fffff0;">
    <col span="1" style="width:150px; background-color:#ffffff;">
  </colgroup>
  <tr><th>No</th><th>都道府県</th><th>市区町村</th><th>人口</th></tr>
  <tr><td>1</td><td>神奈川県</td><td>横浜市</td><td>3,740,172</td></tr>
  <tr><td>2</td><td>大阪府</td><td>大阪市</td><td>2,725,006</td></tr>
  <tr><td>3</td><td>愛知県</td><td>名古屋市</td><td>2,320,361</td></tr>
  <tr><td>4</td><td>北海道</td><td>札幌市</td><td>1,966,416</td></tr>
  <tr><td>5</td><td>福岡県</td><td>福岡市</td><td>1,579,450</td></tr>
  <tr><td>6</td><td>兵庫県</td><td>神戸市</td><td>1,527,407</td></tr>
  <tr><td>7</td><td>神奈川県</td><td>川崎市</td><td>1,516,483</td></tr>
  <tr><td>8</td><td>京都府</td><td>京都市</td><td>1,468,980</td></tr>
  <tr><td>9</td><td>埼玉県</td><td>さいたま市</td><td>1,295,607</td></tr>
  <tr><td>10</td><td>広島県</td><td>広島市</td><td>1,199,252</td></tr>
</table>
人口ランキング
No都道府県市区町村人口
1神奈川県横浜市3,740,172
2大阪府大阪市2,725,006
3愛知県名古屋市2,320,361
4北海道札幌市1,966,416
5福岡県福岡市1,579,450
6兵庫県神戸市1,527,407
7神奈川県川崎市1,516,483
8京都府京都市1,468,980
9埼玉県さいたま市1,295,607
10広島県広島市1,199,252

このサンプル結果のタイトル行は、別途CSSを指定しています。

備考

  • colは「column」(列)の略です。
  • 親のcolgroupがspan属性を持っている場合は、colを子要素に指定できません。

関連項目

  • table:表を作成する
  • tr:表の行を定義する
  • th:表のヘッダセルを定義する
  • td:表のセルを定義する
  • tbody:テーブルのメイン領域を表す
  • thead:テーブルのヘッダー行領域を表す
  • tfoot:テーブルのフッター行領域を表す
  • caption:表をのタイトルを指定する
  • colgroup:表の列をグループ化する
  • col:表の列を表す