colタグ -table内で列のスタイルを設定する｜HTML辞典

<col>タグとは？

<col> タグは、HTML の <table>（表）内で列（カラム）のスタイルを設定するためのタグです。
<colgroup> の中で使用し、span 属性を指定することで複数の列を一括でスタイル設定できます。

基本情報

コンテンツモデル

なし（このタグは <colgroup> 内でのみ使用可能）。

閉じタグの有無

<col> は 自己終了タグ（<col />）として使用可能 です。

基本的な記述方法

<table border="1">
    <colgroup>
        <col span="2" style="background-color: lightgray;">
        <col style="background-color: lightblue;">
    </colgroup>
    <tr>
        <th>名前</th>
        <th>年齢</th>
        <th>職業</th>
    </tr>
    <tr>
        <td>田中</td>
        <td>25</td>
        <td>エンジニア</td>
    </tr>
    <tr>
        <td>佐藤</td>
        <td>30</td>
        <td>デザイナー</td>
    </tr>
</table>

✅ 最初の 2 列は背景色が「ライトグレー」、最後の列は「ライトブルー」になります。

使用できる主な属性

属性名	説明	例
span	適用する列の数	<col span="2">
style	CSS を適用	<col style="background-color: yellow;">

CSSを使ったデザイン変更

<col> を使うことで、列ごとに 一括でスタイルを適用 できます。

col:first-child {
    background-color: lightgray;
}

col:last-child {
    background-color: lightblue;
}

✅ 1列目を「ライトグレー」、最後の列を「ライトブルー」に変更できます。

適切な使用例

✅ <colgroup> 内で複数の <col> を指定する

<table border="1">
    <colgroup>
        <col style="background-color: yellow;">
        <col style="background-color: pink;">
    </colgroup>
    <tr>
        <th>商品</th>
        <th>価格</th>
    </tr>
    <tr>
        <td>りんご</td>
        <td>100円</td>
    </tr>
</table>

✅ span を指定して複数の列をまとめてスタイル変更

<table border="1">
    <colgroup>
        <col span="2" style="background-color: lightgreen;">
    </colgroup>
    <tr>
        <th>名前</th>
        <th>年齢</th>
        <th>職業</th>
    </tr>
</table>

適切でない使用例（誤った使い方）

❌ <col> を <table> の外に記述する

<!-- NG: <table> の外に <col> を記述 -->
<col style="background-color: yellow;">
<table border="1">
    <tr>
        <th>商品</th>
        <th>価格</th>
    </tr>
</table>

✅ 正しい書き方（<colgroup> 内に記述）

<table border="1">
    <colgroup>
        <col style="background-color: yellow;">
    </colgroup>
    <tr>
        <th>商品</th>
        <th>価格</th>
    </tr>
</table>

❌ <col> を <colgroup> なしで使用する

<!-- NG: <colgroup> を省略 -->
<table border="1">
    <col style="background-color: red;">
    <tr>
        <th>名前</th>
        <th>年齢</th>
    </tr>
</table>

✅ 正しい書き方（<colgroup> 内に記述）

<table border="1">
    <colgroup>
        <col style="background-color: red;">
    </colgroup>
    <tr>
        <th>名前</th>
        <th>年齢</th>
    </tr>
</table>

<col>タグと他のタグの違い

タグ	役割	特徴	適切な用途
<col>	列のスタイル設定	colgroup 内で使用	テーブルの列ごとの装飾
<colgroup>	<col> をグループ化	<col> の親要素	複数の列に一括適用
<th>	見出しセル	1行目の見出しに使用	カラムのラベル
<tr>	行を作成	<th> や <td> を内包	テーブルの行管理
<td>	データセル	rowspan や colspan 可能	テーブルのデータ入力

使用上の注意点

✅ <col> は <colgroup> 内で使用する

• <table> 直下ではなく、必ず <colgroup> の中に記述する。

✅ span 属性を活用すると、複数の列を一括で装飾できる

• 不要な <col> の記述を減らすことが可能。

✅ <col> ではセル単位でのスタイル設定はできない

• セルごとのデザイン変更は <td> や CSS を使用する。

関連タグ

• <table> – テーブル全体を作成
• <caption> – テーブルのタイトルを指定
• <colgroup> – 列のグループを定義
• <tr> – 行を作成
• <th> – 見出しセルを作成
• <td> – データセルを作成

まとめ

<col> タグは、HTML の テーブル内の列（カラム）に対して一括でスタイルを適用するタグ です。
適切に使用することで、コードをシンプルに保ちつつ、テーブルの見た目を整えることができます。