HTML <col>

<COL> は表の列に属性を指定するHTMLタグです。 縦の1列に対してスタイル（文字の大きさや色など）を統一したい場合、ひとつひとつのセルに対してスタイルを指定しなくても <COL> タグを使用することで、縦の1列すべてのスタイルを統一することができます。 <COLGROUP>タグと</COLGROUP>タグで挟むことにより、複数の<COL>タグをグループ化することができます。

書式

<col></col>

開始タグ

col要素タイプの開始タグは省略できない。

終了タグ

col要素タイプの終了タグは省略できる。

<col class="odd">
<col class="even">

XML形式では以下のように終了タグを省略する。

<col class="odd" />
<col class="even" />

コンテンツモデル

col要素タイプのコンテンツモデルは空である。col要素タイプの開始タグと終了タグの間には、要素や文字列を入れることができない。

属性

class
CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。 
<col class="bg-silver black">
id
要素毎に固有な識別子を指定する。識別子はCSSやJavaScriptから要素を識別するときに利用する。 
<col id="primary-key">
span
列の数を指定する。

2つの列に対して背景色を指定する例を以下に示す。

<table>
  <col span="2" style="background-color: aquamarine">
  <thead>
    <tr>
      <th>コード<th>
      <th>金融機関<th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0001</td>
      <td>みずほ銀行</td>
    </tr>
    <tr>
      <td>0005</td>
      <td>三菱UFJ銀行</td>
    </tr>
    <tr>
      <td>0009</td>
      <td>三井住友銀行</td>
    </tr>
  </tbody>
</table>
コード 金融機関
0001 みずほ銀行
0005 三菱UFJ銀行
0009 三井住友銀行
style
CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

以下に示すCSSプロパティをcol要素タイプに指定することができる。

列に対して背景色と横幅を指定する例を以下に示す。

<table>
  <col style="background-color: aquamarine">
  <col style="width: 12rem">
  <thead>
    <tr>
      <th>コード<th>
      <th>金融機関<th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0001</td>
      <td>みずほ銀行</td>
    </tr>
    <tr>
      <td>0005</td>
      <td>三菱UFJ銀行</td>
    </tr>
    <tr>
      <td>0009</td>
      <td>三井住友銀行</td>
    </tr>
  </tbody>
</table>
コード 金融機関
0001 みずほ銀行
0005 三菱UFJ銀行
0009 三井住友銀行

col要素に指定したCSSプロパティは、表のセル内にあるテキストに影響を及ぼさない。したがって、以下のスタイルシートを指定することはできない。（指定しても効果が無い）

上記のCSSプロパティを縦の列に対して適用したい場合は、各セルのth要素やtd要素に対してひとつづつスタイルシートを指定するしかない。

スタイルの優先順位は「td要素 > tr要素 > tbody要素 > col要素 > table要素」である。

関連記事

参考文献

Web Hypertext Application Technology Working Group (2022) "Tabular data" HTML Living Standard