表の内容を、行単位でグループ化する指定です。「ヘッダ部分」「フッタ部分」「本体部分」、この3つのグループに分けることができます。
グループ化した内容は、グループ単位で属性やスタイルシートが設定できるようになります。
■ヘッダ部分
<thead> 〜 </thead>
theadタグに囲まれた内容がヘッダ部分になります。
■フッタ部分
<tfoot> 〜 </tfoot>
tfootタグに囲まれた内容がフッタ部分になります。
■本体部分
<tbody> 〜 </tbody>
tbodyタグに囲まれた内容が本体部分になります。
【記述する順番】
thead（ヘッダ）、tfoot（フッタ）、tbody（本体）の順番で記述する必要があります。
【記述例】
<table>
<thead>
<tr>
<td>ヘッダ部分</td>
</tr>
</thead>
<tfoot>
<tr>
<td>フッタ部分</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>本体部分</td>
</tr>
</tbody>
</table>
【captionタグを使用する場合】
captionタグを使用する場合は、tableタグとtheadタグの間に記述します。
<table>
<caption>表のタイトル</caption>
<thead>
<tr>
<td>表の内容</td>
</tr>
・
・
以下の属性を指定すると、セル内の文字の位置をグループ単位で指定できます。
align="" は横方向、valign="" は縦方向の指定を行います。
| align="" | left … （左に表示します）デフォルト |
|---|---|
| center … （中央に表示します） | |
| right … （右に表示します） | |
| valign="" | top … （上部に表示します） |
| middle … （中央に表示します）デフォルト | |
| bottom … （下部に表示します） |
HTML4.01ではtbodyタグの指定が必須とされていますが、ヘッダとフッタが無い場合で、本体部分が1つしかない場合には、このtbodyタグを省くことができます。
<table border="1" width="500">
<thead style="background-color: #80ffff">
<tr>
<th>Webデザイン</th>
<th>Web作成</th>
<th>Webプロモーション</th>
</tr>
</thead>
<tfoot align="right" style="background-color: #c0c0c0">
<tr>
<td colspan="3">ホームページ制作サービス</td>
</tr>
</tfoot>
<tbody align="center" style="background-color: #ffffff">
<tr>
<td>A社</td>
<td>C社</td>
<td>E社</td>
</tr>
<tr>
<td>B社</td>
<td>D社</td>
<td>F社</td>
</tr>
</tbody>
</table>
▼これをブラウザで見ると次のように表示されます
| Webデザイン | Web作成 | Webプロモーション |
|---|---|---|
| ホームページ制作サービス | ||
| A社 | C社 | E社 |
| B社 | D社 | F社 |
