<colgroup> と <col> タグで 3 列の背景色を設定します:
<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
Try it Yourself ❯
<colgroup> タグは、書式設定のためにテーブルの 1 つ以上の列のグループを指定します。
<colgroup> タグは、行ごとに各セルのスタイルを繰り返すのではなく、列全体にスタイルを適用するのに便利です。
注: <colgroup> タグは、<caption> 要素の後で、 <thead>、<tbody>、<tfoot>、<tr> 要素の前に置く、 <table> 要素の子でなければなりません。
チップ: <colgroup> 内の列にいろいろなプロパティを定義するには、<colgroup> タグ内で <col> タグを使用します。
要素 | |||||
---|---|---|---|---|---|
<colgroup> | Yes | Yes | Yes | Yes | Yes |
HTML 4.01 の属性のほとんどは、HTML5 ではサポート対象外です。
属性 | 値 | 説明 |
---|---|---|
align | left right center justify char |
HTML5 ではサポート対象外。 列グループ内のコンテンツを配置する |
char | character | HTML5 ではサポート対象外。 文字に列グループ内のコンテンツを揃える |
charoff | number | HTML5 ではサポート対象外。 属性で指定した文字までの文字数を指定する |
span | number | 列グループをまたがる列数を指定する |
valign | top middle bottom baseline |
HTML5 ではサポート対象外。 列グループ内のコンテンツの縦位置を揃える |
width | pixels % relative_length |
HTML5 ではサポート対象外。 列グループの幅を指定する |
<colgroup> タグは、HTML のグローバル属性もサポートします。
<colgroup> タグは、HTML のイベント属性もサポートします。
HTML DOM リファレンス:ColumnGroup オブジェクト
ほとんどのブラウザは、次のデフォルト値を使用して <colgroup> 要素を表示しています: