| ■ 列の構造(グループ)化 |
| colgroup要素は、表の 列 をグループ化し、span属性で、まとめる列数を指定します。 |
| また、col要素は、colgroup要素で指定した列グループを個別にスタイルを指定します。 |
| ソースを置く場所は、colgroup要素は、caption要素の次、thead要素や tr要素の前に置き、col要素は、colgroup要素の中に記述します。 |
 ソース |
<table border="1" width="280">
<caption>商品別平均価格</caption>
<colgroup style="background : Teal ; color : #ffffff"></colgroup>
<colgroup span="2">
<col style="background : LightSeaGreen ; color : #ffffff">
</col>
<col style="background : DarkSeaGreen ; color : #ffffff">
</col>
</colgroup>
<thead align="center">
<tr>
<td>店名/商品名</td><td>A商品</td><td>B商品</td>
</tr>
</thead>
<tfoot style="font : bold ; color : #ff0000 ;">
<tr>
<td>平均価格</td><td>1000</td><td<2000</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>A店</td><td>950</td><td>2050</td>
</tr>
<tr>
<td>B店</td><td>1050</td><td>1950</td>
</tr>
</tbody>
</table>
|
|
 表 示 |
|
|
|
| 上記の例は、colgroup要素、col要素が、どの列グループに対しての指定かを背景色をつけて表示してあります。 |
| 背景色 Teal が指定してある列は、最初に記述された colgroup要素が指定しており、 LightSeaGreen と、DarkSeaGreen が指定してある列は、span="2" が指定してある colgroup要素が指定しています。 |
| また、 LightSeaGreen の指定してある列は、span="2" が指定してある colgroup要素の中の、最初に記述された col要素が指定しています。 |
| 表内のテキスト(文字)には、各、colgroup要素、col要素に、color : #ffffff(白)を指定しています。 |
| span="2" が指定してある colgroup要素の 各col要素に白文字が指定してありますが、これを、span="2" が指定してある colgroup要素にまとめて指定する事もできます。 |
| さらに、赤、太字で表示されている行は、行の文字に対して、tfoot要素に、style="font : bold ; color : #ff0000 ;" が指定してあるためです。 |
 属性 |
| いずれの要素も、align属性で、水平方向の位置、valign属性で、垂直方向の位置、width属性で、セルの横幅を指定する事ができます。 |
| 表におけるグループ化で指定する各属性は非推奨ではありませんが、align属性は text-alignプロパティ、valign属性は vertical-alignプロパティ、width属性は widthプロパティで代替指定できます。 |
| ※ Netscape7.1で指定可能な属性は、width属性のみのようです。 |
|
|
|
|
|
|
表の構造（グループ）化