テンプレートとアクセスアップのでめらら楽天日記

2-7グループ化（列）

テーブルタグは一種の「表」ですのでセルのヨコ並び（行）とタテ並び（列）と分けて考えるとわかりやすいと思います。（エクセルなんかと同じですね）
列単位で見た場合、それぞれのタテ一列をいくつかのグループに分けることが可能です。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

<colgroup span="数字" 属性>

グループ化した内容は、グループ単位で各種設定ができます。
span="数字" グループ化したい列数を指定します、省略した場合は１の指定と同じです。

■記述する位置

□基本はtableタグとtrタグの間に記述します。
□captionタグを同時に指定する場合は、captionタグの下に記述します。
□行のグループ化を同時設定する場合は、theadタグより上に記述します。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

■記述の基本例

<table border>

<caption>グループ使用例の基本</caption>

<colgroup span="1" グループ内の属性> … Aグループ
<colgroup span="1" グループ内の属性> … Bグループ
<colgroup span="1" グループ内の属性> … Cグループ

<thead> … ヘッダー部分(行グループ)
<tr>
<th>Aグループ1</th>
<th>Bグループ1</th>
<th>Cグループ1</th>
</tr>
</thead>

<tfoot> … フッター部分(行グループ)
<tr>
<td>Aグループ2</td>
<td>Bグループ2</td>
<td>Cグループ2</td>
</TR>
</tfoot>

<tbody> … 本文部分(行グループ)
<tr>
<td>Aグループ3</td>
<td>Bグループ3</td>
<td>Cグループ3</td>
</tr>
</tbody>

</table>

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

ではやってみましょう！
Aグループは1列、文字左寄せ、幅100px、背景色violet
Bグループは2列、文字中央、幅80px、背景色palegoldenrod
Cグループは3列、文字右寄せ、幅60px、背景色powderblue
で設定しました。

<table border>
<caption>グループ化実例</caption>

<colgroup span="1" align="left" width="100" bgcolor="violet">
<colgroup span="2" align="center" width="80" bgcolor="palegoldenrod">
<colgroup span="3" align="right" width="60" bgcolor="powderblue">

<thead>
<tr>
<th>A-H</th>
<th>B1-H</th>
<th>B2-H</th>
<th>C1-H</th>
<th>C2-H</th>
<th>C3-H</th>
</tr>
</thead>

<tfoot>
<tr>
<td>A-F</td>
<td>B1-F</td>
<td>B2-F</td>
<td>C1-F</td>
<td>C2-F</td>
<td>C3-F</td>
</tr>
</tfoot>

<tbody>
<tr>
<td>A本</td>
<td>B1-本</td>
<td>B2-本</td>
<td>C1-本</td>
<td>C2-本</td>
<td>C3-本</td>
</tr>
</tbody>

</table>

↓こんな感じですね（＾＾）