HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<colgroup>
コラムグループ（Column Group）要素。HTMLテーブルの列（カラム）を構造的にグループ化します。
info
概要
<colgroup> 要素は、HTMLの <table> 内で、複数の列をひとつのグループとして定義するために使用されます。これにより、そのグループ全体に対して一度にスタイル（例えば背景色や幅）を適用したり、構造的な意味付けを行ったりすることができます。
この要素は、<table> 要素の直後、キャプション (<caption>) 要素の後に配置する必要があります。
play_circle
デモ (静的表示)
HTML (Source)
<table style="width: 100%; border-collapse: collapse;">
<colgroup>
<!-- 最初の列に幅を適用 -->
<col style="width: 30%;">
<!-- 残りの2列をグループ化して背景色を適用 -->
<col span="2" style="background-color: #D8E2FF;">
</colgroup>
<tr><th>項目</th><th>値A</th><th>値B</th></tr>
<tr><td>データ1</td><td>100</td><td>200</td></tr>
</table>
Preview (Result)
| 項目 | 値A | 値B |
|---|---|---|
| データ1 | 100 | 200 |
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| span | グループ化する列の数を指定します。デフォルト値は 1 です。複数の連続した列に同じスタイルを適用したい場合に便利です。 |
code
実用例
1. `<col>` 要素を使用しない `span` による列グループ化
<table>
<colgroup span="3" style="background-color: lightgray;"></colgroup>
<tbody>...</tbody>
</table>
<!-- テーブルの最初の3列に一律で背景色が適用されます -->
2. `<col>` 要素と組み合わせて、異なるスタイルを適用
<table>
<colgroup>
<col style="width: 100px;"> <!-- 1列目: 幅100px -->
<col span="2" style="text-align: right;"> <!-- 2・3列目: 右寄せ -->
</colgroup>
<tbody>...</tbody>
</table>
3. 複数の `<colgroup>` を使用して列を細かくグループ化
<table>
<colgroup style="border-left: 5px solid blue;"> <!-- 1列目 -->
<colgroup span="2" style="background-color: #EEE;"> <!-- 2,3列目 -->
<colgroup></colgroup> <!-- 4列目: スタイルなし -->
<tbody>...</tbody>
</table>
lightbulb
知っておくべき重要事項
table
配置のルール
<colgroup> 要素は、必ず <table> 要素の**直下**に配置し、オプションとして <caption> 要素の後に配置しなければなりません。<thead> や <tbody> よりも前に置く必要があります。
accessibility_new
アクセシビリティ
<colgroup> は主にスタイル（見た目）のために使用されます。列の見出しを定義し、支援技術にテーブル構造を正しく伝えるためには、ヘッダーセル (<th>) と scope="col" 属性を適切に使用することが不可欠です。