[新着] Webテンプレートを仮オープンしました
表の内容を、列単位でグループ化する指定です。
グループ化した内容は、グループ単位で属性やスタイルシートが設定できるようになります。
<colgroup span="3"></colgroup>
| span="" | グループ化する列数を指定します |
|---|
【記述する位置】
colgroupタグは、tableタグとtrタグの間に記述します。
captionタグを同時に指定する場合は、captionタグの下に記述します。
行のグループ化を同時に指定する場合は、theadタグより上に記述します。
【記述例】
<table>
<caption>グループ化のサンプル</caption>
<colgroup span="1"></colgroup> … Aグループ
<colgroup span="1"></colgroup> … Bグループ
<colgroup span="1"></colgroup> … Cグループ
<thead>
<tr>
<td>Aグループ1</td>
<td>Bグループ1</td>
<td>Cグループ1</td>
</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>
<table border="1">
<colgroup width="200" style="background-color: #80ff80"></colgroup>
<colgroup span="3" align="right" width="100" style="background-color: #ffffff"></colgroup>
<tr>
<th>A1</th>
<td>B1-1</td>
<td>B1-2</td>
<td>B1-3</td>
</tr>
<tr>
<th>A2</th>
<td>B2-1</td>
<td>B2-2</td>
<td>B2-3</td>
</tr>
<tr>
<th>A3</th>
<td>B3-1</td>
<td>B3-2</td>
<td>B3-3</td>
</tr>
</table>
▼これをブラウザで見ると次のように表示されます
| A1 | B1-1 | B1-2 | B1-3 |
|---|---|---|---|
| A2 | B2-1 | B2-2 | B2-3 |
| A3 | B3-1 | B3-2 | B3-3 |
※NetscapeとFirefoxでは、align属性の指定が反映されないようです。
