HTML Living Standard/col

col 要素

<col> 要素は、HTML の表（<table> 要素）において、列に関するスタイルを定義するために使用されます。<col> 要素は、通常 <colgroup> 要素の内部に配置され、特定の列のスタイルや幅、背景色などの属性を設定するために使われます。この要素を利用することで、表の列に対して一括してスタイルを適用することができます。

基本構造

<col> 要素は、必ず <colgroup> 要素内に配置し、1つまたは複数の <col> 要素を定義することで、表の列に対してスタイルを適用できます。各 <col> 要素は、表の列に対して個別のスタイルを設定することができます。

基本的な構造の例：

<table>
  <colgroup>
    <col span="2" style="background-color: #f0f0f0;">
    <col style="background-color: #e0e0e0;">
  </colgroup>
  <thead>
    <tr>
      <th>商品名</th>
      <th>価格</th>
      <th>数量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>テレビ</td>
      <td>50,000円</td>
      <td>2</td>
    </tr>
    <tr>
      <td>冷蔵庫</td>
      <td>80,000円</td>
      <td>1</td>
    </tr>
  </tbody>
</table>

使用例

以下は、<col> を使って列にスタイルを適用する例です：

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Table with Col Example</title>
  </head>
  <body>
    <table border="1">
      <colgroup>
        <col style="background-color: #f0f0f0;">
        <col style="background-color: #d0d0d0;">
        <col style="background-color: #e0e0e0;">
      </colgroup>
      <thead>
        <tr>
          <th>商品名</th>
          <th>価格</th>
          <th>数量</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>テレビ</td>
          <td>50,000円</td>
          <td>2</td>
        </tr>
        <tr>
          <td>冷蔵庫</td>
          <td>80,000円</td>
          <td>1</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

col 要素の属性

<col> 要素は、主に以下の属性を持っています。

span: この属性は、<col> 要素が適用される列数を指定します。例えば、<col span="2"> とすると、その列に2列分のスタイルが適用されます。
style: この属性を使用して、個々の <col> 要素に直接CSSスタイルを適用することができます。例えば、style="background-color: #f0f0f0;" のように書くことで、列の背景色を変更できます。

使用例

以下は、<col> を使って複数の列にスタイルを適用する例です：

<table border="1">
  <colgroup>
    <col span="2" style="background-color: #d0d0d0;">
    <col style="background-color: #e0e0e0;">
  </colgroup>
  <thead>
    <tr>
      <th>商品名</th>
      <th>価格</th>
      <th>数量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>テレビ</td>
      <td>50,000円</td>
      <td>2</td>
    </tr>
    <tr>
      <td>冷蔵庫</td>
      <td>80,000円</td>
      <td>1</td>
    </tr>
  </tbody>
</table>

CSS と `<col>` 要素

<col> 要素は、CSS を使用して列にスタイルを適用する際に非常に便利です。例えば、特定の列に異なる背景色を適用したり、幅を変更したりできます。スタイルは、個別の列に対して簡単に設定でき、表全体のスタイルを効率的に管理することができます。

アクセシビリティ

<col> 要素自体は、アクセシビリティには直接的な影響を与えませんが、スタイルを利用して表の視認性を高めることができます。列のスタイリングを行うことで、ユーザーが表の内容をより簡単に理解できるようになります。例えば、特定の列を強調表示することで、重要な情報を目立たせることができます。

練習問題

練習1: 表の中で2列に同じスタイルを適用するために <col> を使用してください。
練習2: span 属性を使って、複数の列にスタイルを一括適用してください。
練習3: CSS を使用して、特定の列の幅を変更してみてください。