HTML辞書ホームへ
HTML要素 辞書 by Sentaro
`** 要素内で使用され、表の列全体（または複数の列）に対して共通のスタイルや属性を適用するために使われます。
単体の列または `span` 属性で指定した連続する複数の列を表現します。
<col>
カラム（Column）要素。テーブルの列全体に対してスタイルや属性を定義するために使用されます。
info
概要
<col> 要素は、テーブルの **`
単体の列または `span` 属性で指定した連続する複数の列を表現します。
play_circle
デモ (静的表示)
HTML (Source)
<table>
<colgroup>
<col class="highlight"> <-- 1列目をハイライト -->
<col class="wide"> <-- 2列目を広く -->
<col>
</colgroup>
<tr>
<th>No.</th>
<th>商品名</th>
<th>価格</th>
</tr>
<tr>
<td>001</td>
<td>りんご</td>
<td>150円</td>
</tr>
</table>
Preview (Result)
| No. | 商品名 | 価格 |
|---|---|---|
| 001 | りんご | 150円 |
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| span | この ` |
| class | 列にCSSクラス名を割り当て、スタイルを一括で適用するために最もよく使用されます。 |
| style | 列に直接インラインスタイルを適用します。 |
| width (非推奨) | 列の幅を指定します。CSSを使用することが強く推奨されます。 |
code
実用例
1. 複数の列に共通スタイルを適用（`span` 属性）
<table>
<colgroup>
<col span="2" style="background-color: #f0f0f0;"> <-- 最初の2列に背景色を適用 -->
<col> <-- 3列目 -->
</colgroup>
<tbody>...</tbody>
</table>
2. CSSクラスによる列幅の指定
<!-- CSS -->
.date-col { width: 120px; }
<!-- HTML -->
<table>
<colgroup>
<col> <-- 1列目 (デフォルト幅) -->
<col class="date-col"> <-- 2列目 (日付) -->
<col class="date-col"> <-- 3列目 (日付) -->
</colgroup>
<tbody>...</tbody>
</table>
lightbulb
知っておくべき重要事項
info
`<colgroup>` 要素内でのみ有効
`
`
accessibility_new
アクセシビリティ上の注意
`` 要素の `scope` 属性や適切なテーブル構造を参照します。`
`