<thead> - テーブル・ヘッダ

2009.12.11

構文

<table>
    <caption>・・・</caption>
    <thead>
        ：
    </thead>
    <tfoot>
        ：
    </tfoot>
    <tbody>
        ：
    </tbody>
</table>

説明文

　<table>タブで構成した表は3つの部分に分けて表を作成できる。メインとなる表は<tbody>タブ内に記述する。<thead>タブはメインとなる表の上部に付加する事ができるタブである。例えば，各列の説明を記載する表則を記載する場合などに利用できる。ブラウザによっては<tfoot>を常に表示しておき<tbody>の部分をスクロールして表示するといった事も可能となる。

　また，メインとなる表の下に付加する表には<tfoot>タブを利用する。

サンプル

HTMLソース

<table border=1 width=350 align=center>
 <caption>【テーブルの例】</caption>
 <thead>
  <tr bgcolor="#800000" style="color:#ffffff;">
    <th>国名</th>
    <th>首都名</th>
    <th>人口</th>
    <th>人口密度</th>
  </tr>
 </thead>
 <tbody>
 <tr align=center>
  <th>日本国</th>
  <td>東京</td>
  <td>1億2728万人</td>
  <td>337人/Km<sup>2</sup></td>
 </tr>
 <tr align=center>
  <th>アメリカ合衆国</th>
  <td>ワシントンD.C.</td>
  <td>3億1465万人</td>
  <td>31人/Km<sup>2</sup></td>
 </tr>
 <tr align=center>
  <th>ドイツ連邦共和国</th>
  <td>ベルリン</td>
  <td>8216万人</td>
  <td>231人/Km<sup>2</sup></td>
 </tr>
 </tbody>
</table>

ブラウザ表示例

【テーブルの例】
国名	首都名	人口	人口密度
日本国	東京	1億2728万人	337人/Km²
アメリカ合衆国	ワシントンD.C.	3億1465万人	31人/Km²
ドイツ連邦共和国	ベルリン	8216万人	231人/Km²

対応状況

HTML			IE		Firefox		Opera
4 strict	4 Transitional	5	6	7	2	3	8	9
○	○	○	○	○	○	○	○	○

要素，タグ

タグ要素	テーブル要素
包括可能要素	<tr>（必須）
タグ記述条件	開始タグ：必須　終了タグ：省略可

属性

よく利用する属性

属性	意味	対応
属性	意味	HTML 4s	HTML 4t	その他
align=配置位置	セル内の横方向における内容の配置位置を指定する。「left」で左揃え，「center」で中央揃え，「right」で右揃え，「justify」でセル内に均等になるように配置する。また，「char」を指定するとchar属性に従った配置を行う	○	○
bgcolor=色	セル内の背景色を指定する。redやblueなどといった色名を指定できる。また，色の3原色を256階調（00からff）で指定することも可能。この際，「#赤緑青」の順に指定する。例えば，黄色であれば「#ffff00」と指定する	×	×	IE、Fox
valign=valign	セル内の縦方向における内容の配置位置を指定する。「top」でセルの上辺に揃え，「bottom」でセルの下辺に揃える。「middle」でセルの中央に配置する。また，「baseline」を指定すると，セル内の1行目をベース・ラインで揃える	○	○

その他の属性

属性	意味	対応
属性	意味	HTML 4s	HTML 4t	その他
char=文字	セル内の内容を揃えるベースとなる文字を指定する。例えば，小数をセル内で利用している場合は，「.」を指定することで，桁数を合わせることができる	○	○
charoff=文字数	char属性で指定した文字から指定した文字分ずらした位置で揃える。例えば，小数点2桁目で揃えたい場合は「charoff="2"」と指定すればよい	○	○
class=クラス名	このタグのクラス名。CSSでスタイルを指定する場合などに利用される	○	○
dir=方向	タグ内の文字の表示方向。「ltr」を指定すると文字を左から右に，rtlを指定すると「右から左」に表示する。しかし，多くのWebブラウザでは，文字コードを自動判別し，自動的に表示方向を決定している。そのため，日本語を「rtl」と指定しても実際には左から右に表示される。強制的に並び替えを行いたい場合は<bdo>タグを利用する	○	○
id=ID	タグのID。ダイナミックHTMLでタグを操作する場合や，Java Scriptでのタグの制御，個別にスタイルを指定する場合などに利用する	○	○
lang=言語	タグ内に記述した言語。例えば，日本語の場合は「ja」，英語の場合は「en」を指定する	○	○
style=スタイル	タグのスタイル。スタイルの指定方法については「CSSの基本 (2) CSSの記述位置」を参照	○	○
title=タイトル	タグのタイトル。一般的にタグの補足情報を記述する。一般的なWebブラウザでは，タグ上にマウス・ポインタを乗せるとツール・チップにtitle属性に指定した内容を表示する	○	○

マウスやキーボードの状況変化に関わる属性

属性	意味	対応
属性	意味	HTML 4s	HTML 4t	その他
onclick=スクリプト	このタグに対応する表示結果にマウスの左ボタンをクリックした場合に，指定したスクリプトを実行する	○	○
ondblclick=スクリプト	このタグに対応する表示結果にマウスの左ボタンをダブル・クリックした場合に，指定したスクリプトを実行する	○	○
onmousedown=スクリプト	このタグに対応する表示結果にマウスのボタンで押下した場合に，指定したスクリプトを実行する	○	○
onmouseup=スクリプト	このタグに対応する表示結果にマウスのボタンを離した場合に，指定したスクリプトを実行する	○	○
onmouseover=スクリプト	このタグに対応する表示結果にマウス・ポインタが乗った場合に，指定したスクリプトを実行する	○	○
onmousemove=script	このタグに対応する表示結果上でマウス・ポインタが動いた場合に，指定したスクリプトを実行する	○	○
onmouseout=スクリプト	このタグに対応する表示結果にマウス・ポインタが外れた場合に，指定したスクリプトを実行する	○	○
onkeypress=スクリプト	このタグに対応する表示結果にフォーカスした状態で，キーボードのキーを押下して離した場合に，指定したスクリプトを実行する	○	○
onkeydown=スクリプト	このタグに対応する表示結果にフォーカスした状態で，キーボードのキーを押下した場合に，指定したスクリプトを実行する	○	○
onkeyup=スクリプト	このタグに対応する表示結果にフォーカスした状態で，キーボードのキーから離した場合に，指定したスクリプトを実行する	○	○