<colgroup>: COLGROUP 要素

最終更新：2026-10-13

<colgroup>COLGROUP 要素

テーブルの列をグループ化するコンテナーです。col 要素をまとめて列スタイルを一括定義します。

カテゴリ	テーブル
コンテンツモデル	フローコンテンツ
許可される親要素	フローコンテンツを受け入れる要素
閉じタグ	必要 `</colgroup>` タグ
ステータス	標準

📝 構文

<colgroup>
  <col>
</colgroup>

⚙️ 属性

この要素はグローバル属性に加え、以下の属性をサポートします：

属性	値	説明
`span`		Columns covered when no col children are present.

すべてのグローバル属性を見る → すべてのイベント属性を見る →

▶ サンプル

下のコードを編集して、playground でリアルタイム結果を確認：

▶ 試してみる

🌐 ブラウザサポート

ブラウザ	Chrome	Edge	Firefox	Safari	Opera
<colgroup>	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザでサポート

ヒント： col 子要素がある場合、colgroup の span は無視されます。caption の後、thead の前に置きます。

❓ よくある質問

Qcolgroup は必須ですか？

A必須ではありません。<col> は table の直下に置けますが、仕様は <colgroup> で包むことを推奨しています。構造が明確になり、バリデーターにも優しいからです。列をグループに分けてスタイルを当てる場合（前の数列は別の背景など）、colgroup が唯一の正攻法です。

Qcolgroup は table のどこに書きますか？

A<caption> の直後、行の内容（thead/tbody/tr）より前という固定位置です：<table><caption>…</caption><colgroup>…</colgroup><thead>…</thead></table>。順序を間違えるとパーサーに調整されるか、検証エラーになります。

Qcolgroup と th の width はどちらが優先されますか？

A列レベルの設定（col/colgroup の width）とセルの設定は衝突し得ます。ブラウザの解釈では、col が設定した列幅が列全体に優先して効き、セルの中身が極端に広い場合は押し広げられることがあります。実務では列幅は1か所（通常は colgroup）だけで定義し、混在させないのがおすすめです。