テーブルの列をグループ化
colgroup要素を使用してテーブルの列をグループ化していく方法を解説していきます。
colgroup要素はcol要素を使用するものと、span属性を使用する方法の２つがあります。
列をグループ化し、CSSでデザインする
colgroup要素はテーブルの列をグループ化する際に使用します。span属性は列の数を指定し、col要素はcolgroup要素内にspan属性が使用されていない場合に限り、列を表すことに使用できます。
<colgroup>とspanを使用した場合
<colgroup span="3"></colgroup><colgroup>と<col>を使用した場合（class名は任意です）
<colgroup>
<col class="red">
<col class="yellow">
<col class="green">
</colgroup>下の例では、col要素をclass属性で任意の名前をつけてCSSでそれぞれの列ごとに背景色を設定していきます。
| 要素 | 解説 |
| <colgroup> | テーブルの１列以上の列グループ |
| <col> | colgroup要素が作る列グループ内のひとつ以上の列 |
| 属性 | 解説 |
| border | 枠線を表示する、テーブルに使用するborder属性に入力できる値は1あるいは空文字 |
| span | テーブルの列グループの列数 |
| CSSプロパティ | 解説 |
| background-color | 背景の色 |
<table border="1">
<caption>列をグループ化</caption>
<colgroup>
<col class="red">
<col class="yellow">
<col class="green">
</colgroup>
<tr>
<th scope="col">赤</th>
<th scope="col">黄</th>
<th scope="col">緑</th>
</tr>
<tr>
<td>赤-１</td>
<td>黄-１</td>
<td>緑-１</td>
</tr>
<tr>
<td>赤-２</td>
<td>黄-２</td>
<td>緑-２</td>
</tr>
<tr>
<td>赤-３</td>
<td>黄-３</td>
<td>緑-３</td>
</tr>
<table>test.css
@charset "utf-8";
col.red { background-color: #ffcccc;}
col.yellow { background-color: #ffff99;}
col.green { background-color: #ccff99;}ブラウザ表示例
| 赤 | 黄 | 緑 |
|---|---|---|
| 赤-１ | 黄-１ | 緑-１ |
| 赤-２ | 黄-２ | 緑-２ |
| 赤-３ | 黄-３ | 緑-３ |
