テーブルのヘッダ・フッタ・本体

テーブルのヘッダ・フッタ・本体【<thead>、<tfoot>、<tbody>】

ブラウザで表示した時の見え方

タイトル	アーティスト	感想
タイトル	アーティスト	感想
儚いダイヤモンド	B'z	自分の中にあった虚しさが明るい形でふっきれた曲。
つめたくしないで	吉田美和	いい意味で女性特有の、せつなくてカワイイ曲。

ソースサンプル

<table cellspacing="2" cellpadding="4" summary="曲の紹介">
<thead bgcolor="#baa8f0">
<tr>
<th>タイトル</th>
<th>アーティスト</th>
<th>感想</th>
</tr>
</thead>
<tfoot bgcolor="#baa8f0">
<tr>
<th>タイトル</th>
<th>アーティスト</th>
<th>感想</th>
</tr>
</tfoot>
<tbody bgcolor="#e1dcf0">
<tr>
<td>儚いダイヤモンド</td>
<td>B'z</td>
<td>自分の中にあった虚しさが明るい形でふっきれた曲。</td>
</tr>
<tr>
<td>つめたくしないで</td>
<td>吉田美和</td>
<td>いい意味で女性特有の、せつなくてカワイイ曲。</td>
</tr>
</tbody>
</table>

[ 黒※説明中のタグ紫※省略可能なタグ赤※変更可能緑※文章など ]

解説

テーブルの行をヘッダ、フッタ、ボディに分けてグループ化することができます。
配置する順序はthead、tfoot、tbodyの順になります。ボディよりフッタを先に配置するのは、長さのわからないボディよりもフッタを先に表示させることができるようにするためです。（未対応のブラウザもあります）
オプションを紹介しますが、できる部分はCSSで設定しましょう。
(※1)は非推奨属性です。

オプション
bgcolor (※1)	16進数またはカラーネーム	背景色を指定する	<thead bgcolor="#ffffff">
height	ピクセルまたは%	高さを指定する	<thead height="200">
width	ピクセルまたは%	幅を指定する	<thead width="150">
align	left center right justify	左揃え中央揃え右揃え両端揃え	<thead align="center">
valign	top middle bottom baseline	上に寄せる中央揃え（初期値）下に寄せる一行目のベースラインを揃える	<thead valign="top">
属性名	値	機能	例

AICHAN WEB(Z) > HTML＆CSSサンプル集(S) > HTML - テーブルのヘッダ・フッタ・本体

テーブルのヘッダ・フッタ・本体 【<thead>、<tfoot>、<tbody>】

テーブルのヘッダ・フッタ・本体【<thead>、<tfoot>、<tbody>】