HTML / 要素

col要素の使い方

col要素は、表の中で「この列にはこの設定を使う」と指定する要素です。たとえば、2つのプランの列に同じ背景色を付けられます。

先に結論

colは、表の中のcolgroupに入れ、見出し行やデータ行より前に置きます。

colに列名やセルの中身は書きません。列の見出しはthに書きます。列ごとの設定が必要なければ、colは使わなくてもかまいません。

小さな例

<style>
  .plan-columns {
    background-color: #eaf3ff;
  }
</style>

<table>
  <caption>プランごとの月額料金</caption>
  <colgroup>
    <col>
    <col class="plan-columns" span="2">
  </colgroup>
  <thead>
    <tr>
      <th scope="col">項目</th>
      <th scope="col">ライト</th>
      <th scope="col">スタンダード</th>
    </tr>
  </thead>
  <tbody>
    <tr><th scope="row">月額</th><td>500円</td><td>900円</td></tr>
  </tbody>
</table>

プランごとの月額料金
項目	ライト	スタンダード
月額	500円	900円

最初のcolは1列、次のcolはspan="2"によって2列を表します。青い背景は列に付けたCSSです。列の名前や料金は、それぞれthとtdに書いています。

`col`と`colgroup`

colgroupは、列をまとめる箱です。
colは、その箱の中で列を1本ずつ、または複数本まとめて表します。
spanを省略すると、colは1列を表します。
colは中身のない要素なので、HTMLでは終了タグを書きません。

グループの列数だけを指定したいときは、子のcolを置かず、colgroupにspanを書けます。列ごとに設定を変えるときは、グループ内のcolにspanを書きます。この2つの方法は同時に使いません。

列の見た目について

colは表のセルを包む要素ではありません。また、どのCSS設定でも列に効くわけではありません。列の背景が見えないときは、セルや行に別の背景色が付いていないか確認します。列幅や背景の条件を詳しく知りたい場合は、Atlasのページで確認できます。

よくある間違い

colに「料金」などの文字を書く。列の見出しはthの中に書きます。
colに</col>という終了タグを書く。HTMLのcolには終了タグがありません。
colをcolgroupの外に書く。正しいHTMLでは、表のcolgroupの中に置きます。
colがデータセルも作ると思う。データはtrの中にtdやthで書きます。