構文
<table>
:
<tbody>
<tr>
<th>・・・</th>
<td>・・・</td>
:
</tr>
:
</tbody>
</table>
説明文
表のヘッダとなるセルを構成する。各行または各列の説明をしている表則といったセルなどといった表の本体部分とは異なる内容の場合に利用する。また,表のデータ本体で文字を強調したいだけならば,<th>タブは利用せず<td>を使い,スタイル・シートで文字や背景色などを指定する。
また,横のセルと結合したい場合はcolspan属性,縦のセルと結合したい場合はrowspan属性で指定する。
サンプル
HTMLソース
<table border="1" width="250" align="center">
<caption>【テーブルの例】</caption>
<thead>
<tr bgcolor="#800000" style="color:#ffffff;">
<th> </th>
<th>HTML 4</th>
<th>HTML 5</th>
<th>CSS 2</th>
</tr>
</thead>
<tbody>
<tr>
<th>用途</th>
<td>文書構造の記述</td>
<td>文書構造の記述</td>
<td>スタイルの記述</td>
</tr>
<tr align="center">
<th>見栄えの指定</th>
<td>△</td>
<td>×</td>
<td>○</td>
</tr>
</tbody>
</table>
ブラウザ表示例
【テーブルの例】
|
HTML 4 |
HTML 5 |
CSS 2 |
用途 |
文書構造の記述 |
文書構造の記述 |
スタイルの記述 |
見栄えの指定 |
△ |
× |
○ |
対応状況
HTML |
IE |
Firefox |
Opera |
4 strict |
4 Transitional |
5 |
6 |
7 |
2 |
3 |
8 |
9 |
○ |
○ |
○ |
○ |
○ |
○ |
○ |
○ |
○ |
要素,タグ
タグ要素 |
テーブル要素 |
包括可能要素 |
ブロック要素,インライン要素 |
タグ記述条件 |
開始タグ:必須 終了タグ:省略可 |
属性
よく利用する属性
属性 |
意味 |
対応 |
HTML 4s |
HTML 4t |
その他 |
align=配置位置 |
セル内の横方向における内容の配置位置を指定する。「left」で左揃え,「center」で中央揃え,「right」で右揃え,「justify」でセル内に均等になるように配置する。また,「char」を指定するとchar属性に従った配置を行う |
○ |
○ |
|
valign=valign |
セル内の縦方向における内容の配置位置を指定する。「top」でセルの上辺に揃え,「bottom」でセルの下辺に揃える。「middle」でセルの中央に配置する。また,「baseline」を指定すると,セル内の1行目をベース・ラインで揃える |
○ |
○ |
|
height=高さ |
セルを表示する際の高さを指定する。数値のみで指定すると単位がピクセルとなる。割合で指定する場合は「%」を末尾に付ける |
× |
○ |
|
width=幅 |
セルを表示する際の横幅を指定する。数値のみで指定すると単位がピクセルとなる。割合で指定する場合は「%」を末尾に付ける |
× |
○ |
|
bgcolor=色 |
セル内の背景色を指定する。redやblueなどといった色名を指定できる。また,色の3原色を256階調(00からff)で指定することも可能。この際,「#赤緑青」の順に指定する。例えば,黄色であれば「#ffff00」と指定する |
× |
○ |
|
colspan=セル数 |
複数のセルを横方向に連結する場合に,つなげるセル数を指定する |
○ |
○ |
|
rowspan=セル数 |
複数のセルを縦方向に連結する場合に,つなげるセル数を指定する |
○ |
○ |
|
その他の属性
属性 |
意味 |
対応 |
HTML 4s |
HTML 4t |
その他 |
abbr=概略 |
セル内に記述したデータの概略を記載する。ここに記載した内容は音声ブラウザで説明のために読み上げるなどに利用される |
○ |
○ |
|
axis=名前 |
このセルの見出しとのセルを指定するための名前を指定する。<td>タグのheaders属性に<th>のaxisの名前を指定すると,セルが関連付けられる |
○ |
○ |
|
char=文字 |
セル内の内容を揃えるベースとなる文字を指定する。例えば,小数をセル内で利用している場合は,「.」を指定することで,桁数を合わせることができる |
○ |
○ |
|
charoff=文字数 |
char属性で指定した文字から指定した文字分ずらした位置で揃える。例えば,小数点2桁目で揃えたい場合は「charoff="2"」と指定すればよい |
○ |
○ |
|
class=クラス名 |
このタグのクラス名。CSSでスタイルを指定する場合などに利用される |
○ |
○ |
|
dir=方向 |
タグ内の文字の表示方向。「ltr」を指定すると文字を左から右に,rtlを指定すると「右から左」に表示する。しかし,多くのWebブラウザでは,文字コードを自動判別し,自動的に表示方向を決定している。そのため,日本語を「rtl」と指定しても実際には左から右に表示される。強制的に並び替えを行いたい場合は<bdo>タグを利用する |
○ |
○ |
|
headers=ID |
axis属性で指定した名前を記述することで,セルとの関連性を結びつける。複数の名前を指定する場合はスペースで区切って列挙する |
× |
○ |
|
id=ID |
タグのID。ダイナミックHTMLでタグを操作する場合や,Java Scriptでのタグの制御,個別にスタイルを指定する場合などに利用する |
○ |
○ |
|
lang=言語 |
タグ内に記述した言語。例えば,日本語の場合は「ja」,英語の場合は「en」を指定する |
○ |
○ |
|
nowrap |
セル内のデータの自動改行を禁止する |
× |
○ |
|
scope=方向 |
見出しとなるセルにおいて縦または横方向どちらの見出しであるかを指定。縦方向の場合は「row」,横方向の場合は「col」を指定する |
○ |
○ |
|
style=スタイル |
タグのスタイル。スタイルの指定方法については「CSSの基本 (2) CSSの記述位置」を参照 |
○ |
○ |
|
title=タイトル |
タグのタイトル。一般的にタグの補足情報を記述する。一般的なWebブラウザでは,タグ上にマウス・ポインタを乗せるとツール・チップにtitle属性に指定した内容を表示する |
○ |
○ |
|
マウスやキーボードの状況変化に関わる属性
属性 |
意味 |
対応 |
HTML 4s |
HTML 4t |
その他 |
onclick=スクリプト |
このタグに対応する表示結果にマウスの左ボタンをクリックした場合に,指定したスクリプトを実行する |
○ |
○ |
|
ondblclick=スクリプト |
このタグに対応する表示結果にマウスの左ボタンをダブル・クリックした場合に,指定したスクリプトを実行する |
○ |
○ |
|
onmousedown=スクリプト |
このタグに対応する表示結果にマウスのボタンで押下した場合に,指定したスクリプトを実行する |
○ |
○ |
|
onmouseup=スクリプト |
このタグに対応する表示結果にマウスのボタンを離した場合に,指定したスクリプトを実行する |
○ |
○ |
|
onmouseover=スクリプト |
このタグに対応する表示結果にマウス・ポインタが乗った場合に,指定したスクリプトを実行する |
○ |
○ |
|
onmousemove=script |
このタグに対応する表示結果上でマウス・ポインタが動いた場合に,指定したスクリプトを実行する |
○ |
○ |
|
onmouseout=スクリプト |
このタグに対応する表示結果にマウス・ポインタが外れた場合に,指定したスクリプトを実行する |
○ |
○ |
|
onkeypress=スクリプト |
このタグに対応する表示結果にフォーカスした状態で,キーボードのキーを押下して離した場合に,指定したスクリプトを実行する |
○ |
○ |
|
onkeydown=スクリプト |
このタグに対応する表示結果にフォーカスした状態で,キーボードのキーを押下した場合に,指定したスクリプトを実行する |
○ |
○ |
|
onkeyup=スクリプト |
このタグに対応する表示結果にフォーカスした状態で,キーボードのキーから離した場合に,指定したスクリプトを実行する |
○ |
○ |
|
関連項目