行と列をグループ化する

<thead>、<tfoot>、<tbody>でテーブルの行をグループ化させることができます。また<colgroup> でテーブルの列をグループ化させることができます。前者の利点はテーブルの行数が多い時にグループ化された行全てのセル内の文字の色や配置をいっぺんに変えてしまうことができます。セルやtrに個別に色や位置を指定していては効率が悪いです。後者の利点も前者と同じ事が言えます。 <thead>、<tfoot>、<tbody>の属性には以下のようなものがあります。

属性	説明
<thead>、<tfoot>、<tbody> <colgroup>共通の属性
bgcolor="色"	グループ化された部分のセルの背景色を指定します。
align="位置"	グループ化された部分のセルの内容の位置を指定します。 center、left、right。
valign="縦位置"	グループ化された部分のセルの内容の縦方向の位置を指定します。 baseline、top、middle、bottom。
<colgroup>のみの属性
span="数字"	グループ化する列の数を指定します。
width="数字"	グループ化する列の横幅を指定します。

【ブラウザ表示】

上部	上部	上部
上部	上部	上部
下部	下部	下部
下部	下部	下部
本体	本体	本体
本体	本体	本体

ソース

<table border="1" width="460">
<thead bgcolor="gold" align="right">……table head（頭）の略。一番上に記述。
<tr>
<td>上部</td><td>上部</td><td>上部</td>
</tr>
<tr>
<td>上部</td><td>上部</td><td>上部</td>
</tr>
</thead>

<tfoot align="center">……table foot（足）の略。2番目に記述。
<tr>
<td>下部</td><td>下部</td><td>下部</td>
</tr>
<tr>
<td>下部</td><td>下部</td><td>下部</td>
</tr>
</tfoot>

<tbody bgcolor="yellow">……table body（本体）の略。一番下に記述。
<tr>
<td>本体</td><td>本体</td><td>本体</td>
</tr>
<tr>
<td>本体</td><td>本体</td><td>本体</td>
</tr>
</tbody>
</table>

【ブラウザ表示】 …列をグループ化

グループ	グループ	グループ外のセル
グループ	グループ	グループ外のセル
グループ	グループ	グループ外のセル

ソース

<table border="1">
<colgroup span="2" bgcolor="fuchsia">
<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>

Follow @hp_master_2003

■ その他の項目

・テーブルを作る
・横幅、高さを指定する
・画像や背景色を指定する
・表示位置を指定する
・テーブルに表題をつける
・間隔、余白を指定する
・セルを結合する
・枠線の色やスタイルを指定する
・枠線の表示方法を指定する
・細い枠線のテーブル
・テーブルを横に並べる
・テーブルで空白を作る

HTMLタグ一覧のページに戻る