構文
<table>
<caption>・・・</caption>
<thead>
：
</thead>
<tfoot>
：
</tfoot>
<tbody>
：
</tbody>
</table>
説明文
<table>タブで構成した表は3つの部分に分けて表を作成できる。メインとなる表は<tbody>タブ内に記述する。また，表本体の上部を<thead>タブで，下部を<tfoot>タブで記述できる。<tbody>タブはを<thead>タブや<tfoot>タブの後に配置する必要がある。
表の記述には<tr>タブで表の行を記述し，その中に<td>タブや<th>タブで列を記述する。
サンプル
HTMLソース
<table border="1">
<caption>【購入部品】</caption>
<tbody>
<tr bgcolor="#cccccc">
<th>品名</th>
<th>単価</th>
<th>個数</th>
<th>価格</th>
</tr>
<tr>
<td>抵抗</td>
<td align="right">10</td>
<td align="right">520</td>
<td align="right">5,200</td>
</tr>
<tr>
<td>IC</td>
<td align="right">50</td>
<td align="right">30</td>
<td align="right">1,500</td>
</tr>
<tr>
<td>LED</td>
<td align="right">80</td>
<td align="right">20</td>
<td align="right">1,600</td>
</tr>
<tr>
<td>基盤</td>
<td align="right">100</td>
<td align="right">20</td>
<td align="right">2,000</td>
</tr>
<tr bgcolor="#cccccc">
<th colspan="3">合計</th>
<td>10,300</td>
</tr>
</tbody>
</table>
ブラウザ表示例
【購入部品】
| 品名 |
単価 |
個数 |
価格 |
| 抵抗 |
10 |
520 |
5,200 |
| IC |
50 |
30 |
1,500 |
| LED |
80 |
20 |
1,600 |
| 基盤 |
100 |
20 |
2,000 |
| 合計 |
10,300 |
対応状況
| 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属性に従った配置を行う |
○ |
○ |
|
| 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=スクリプト |
このタグに対応する表示結果上でマウス・ポインタが動いた場合に，指定したスクリプトを実行する |
○ |
○ |
|
| onmouseout=スクリプト |
このタグに対応する表示結果にマウス・ポインタが外れた場合に，指定したスクリプトを実行する |
○ |
○ |
|
| onkeypress=スクリプト |
このタグに対応する表示結果にフォーカスした状態で，キーボードのキーを押下して離した場合に，指定したスクリプトを実行する |
○ |
○ |
|
| onkeydown=スクリプト |
このタグに対応する表示結果にフォーカスした状態で，キーボードのキーを押下した場合に，指定したスクリプトを実行する |
○ |
○ |
|
| onkeyup=スクリプト |
このタグに対応する表示結果にフォーカスした状態で，キーボードのキーから離した場合に，指定したスクリプトを実行する |
○ |
○ |
|
ヘッダ，フッタ，本体の記述順序
HTMLでは，テーブルの記述をヘッダ（<thead>）→フッタ（<tfoot>）→本体（<tbody>）の順に記述することとなっている。ヘッダ（<thead>）→本体（<tbody>）→フッタ（<tfoot>）の順に記述しがちなため注意が必要だ。
<table>
<thead>
<tr>
<td>ヘッダ部分</td>
</tr>
</thead>
<tfoot>
<tr>
<td>フッタ部分</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>本体部分</td>
</tr>
</tbody>
</table>
関連項目
