構文
<table>
<caption>・・・</caption>
<thead>
:
</thead>
<tfoot>
:
</tfoot>
<tbody>
:
</tbody>
</table>
説明文
<table>タブで構成した表は3つの部分に分けて表を作成できる。メインとなる表は<tbody>タブ内に記述する。<tfoot>タブはメインとなる表の下部に付加する事ができるタブである。例えば,メインの表の合計を表示するなどといった場合に利用できる。ブラウザによっては<tfoot>を常に表示しておき<tbody>の部分をスクロールして表示するといった事も可能となる。
<tfoot>の記載位置は<tbody>タブより前に記載しておく必要がある。
また,メインとなる表の上に付加する表には<tfoot>タブを利用する。
サンプル
HTMLソース
<table border=1 width=250 align=center>
<caption>【テーブルの例】</caption>
<thead>
<tr bgcolor="#800000" style="color:#ffffff;">
<th>Name</th>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
</thead>
<tfoot>
<tr bgcolor="#ffffa0">
<th>合計</th>
<th>120</th>
<th>150</th>
<th>180</th>
</tr>
</tfoot>
<tbody>
<tr align=center>
<th>行-1</th>
<td>10</td>
<td>20</td>
<td>30</td>
</tr>
<tr align=center>
<th>行-2</th>
<td>40</td>
<td>50</td>
<td>60</td>
</tr>
<tr align=center>
<th>行-3</th>
<td>70</td>
<td>80</td>
<td>90</td>
</tr>
</tbody>
</table>
ブラウザ表示例
Name | 列1 | 列2 | 列3 |
---|---|---|---|
合計 | 120 | 150 | 180 |
行-1 | 10 | 20 | 30 |
行-2 | 40 | 50 | 60 |
行-3 | 70 | 80 | 90 |
対応状況
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行目をベース・ラインで揃える | ○ | ○ | |
bgcolor=色 | セル内の背景色を指定する。redやblueなどといった色名を指定できる。また,色の3原色を256階調(00からff)で指定することも可能。この際,「#赤緑青」の順に指定する。例えば,黄色であれば「#ffff00」と指定する | × | ○ |
その他の属性
属性 | 意味 | 対応 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
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では,テーブルの記述をヘッダ(<thead>)→フッタ(<tfoot>)→本体(<tbody>)の順に記述することとなっている。ヘッダ(<thead>)→本体(<tbody>)→フッタ(<tfoot>)の順に記述しがちなため注意が必要だ。
関連項目あなたにお薦め注目のイベント日経クロステック SpecialWhat's New
経営
クラウドアプリケーション/DB/ミドルウエア運用管理設計/開発サーバー/ストレージクライアント/OA機器ネットワーク/通信サービスセキュリティこの機能は会員登録(無料)で使えるようになりますフォロー連載・特集設定 |