<TABLE> | NN すべて IE すべて HTML 3.2 | |||||||||||||||||||
<TABLE>...</TABLE> | HTML 終了タグ : 必要 | |||||||||||||||||||
table 要素は、テーブルのコンテンツを指定する追加要素のコンテナです。テーブルには、コンテンツの行と列から構成されます。table 要素に関連するその他の要素は、caption、col、colgroup、tbody、td、tfoot、th、thead、および tr です。table 要素の目的は、テーブル内の行や列の数に関係なく、テーブル全体に適用される表示属性の多くを定義することです。これらの属性の多くは、特定の行、列、セルで上書きすることができます。行と列の数は、テーブル内の tr および td 要素の構造にとって重要な要因です。 テーブルはコンテンツの行と列を整理する目的にだけでなく、コンテンツの配置にも長い間使用されてきました。テーブルの行と列をボーダーのない空の領域に設定できます。配置可能なコンテンツが存在するため、配置のためにテーブルを使用することはお勧めできません。 深くネストされたテーブル (テーブル内のテーブル) は、一部のブラウザで問題の原因となる場合があります。Navigator 4 では、複雑なテーブルでのスタイルシートの継承と全体的なパフォーマンスに大きな問題があります。ネストのレベルが 3 つを超えると問題が発生します。Macintosh 版 IE 5 では、スクリプトでテーブル関連の要素を作成または変更すると、なぜかセルの寸法が非常に大きくなる場合があります。テーブルの構造が単純であるほど、種類の異なるブラウザでのページの信頼性が高くなります。ビジュアルな HTML オーサリングツールでテーブル構造の編集を繰り返すと、表示されない複雑な項目 (多数の空のセルなど) がソースコードに残っている可能性があります。一時的に細いテーブルボーダーを表示して、正確な行と列の構造を確認してください。 |
||||||||||||||||||||
例 | ||||||||||||||||||||
<TABLE cols="3"> <THEAD> <TR> <TH>Time</TH><TH>Event</TH><TH>Location</TH> </TR> </THEAD> <TBODY> <TR> <TD>7:30am-5:00pm</TD><TD>Registration Open</TD><TD>Main Lobby</TD> </TR> <TR> <TD>9:00am-12:00pm</TD><TD>Keynote Speakers</TD><TD>Cypress Room</TD> </TR> </TBODY> </TABLE> |
||||||||||||||||||||
オブジェクト参照 | ||||||||||||||||||||
[window.]document.getElementById(elementID)
|
||||||||||||||||||||
要素固有の属性 | ||||||||||||||||||||
|
||||||||||||||||||||
要素固有のイベントハンドラー属性 | ||||||||||||||||||||
|
align | NN すべて IE すべて HTML 3.2 |
align="where" | オプション |
すぐ外にあるコンテナ (通常はドキュメントの body または html 要素) を基準にしてテーブルを位置揃えする方法を指定します。HTML 4 では、align 属性の代わりにスタイルシート属性が使用されます。 |
|
例 | |
<TABLE align="center">...</TABLE> |
|
値 | |
位置揃えの定数値 : center | left | right |
|
既定値 | |
left |
|
オブジェクト参照 | |
[window.]document.getElementById(elementID).align
|
background | NN 4 IE 3 HTML なし |
background="URL" | オプション |
テーブルの背景として使用されるイメージファイルを示します。ブラウザコンテンツに読み込まれる通常のイメージとは異なり、背景イメージは拡大や縮小されずにその元のサイズで読み込まれ、テーブル領域を埋めるように並べて表示されます。小さなイメージは速くダウンロードできますが、背景で繰り返される数が多くなります。アニメーション GIF も使用できますが、画面が非常に見づらくなります。背景イメージの選択時には、コンテンツが目立つように、メインとなるコンテンツに比べておとなしい色を選択します。背景イメージを使用する必要はありません。もし、使用する場合には目立たないものを選択してください。 Navigator 4 は、この属性に対して奇妙な動作をする場合があります。背景のないメインのテーブルを別の table 要素の内側に折り返しし、その要素の background プロパティでグラフィックファイルを指定してください。 |
|
例 | |
<TABLE background="watermark.jpg">...</TABLE> |
|
値 | |
イメージファイルへの有効な絶対または相対 URL |
|
既定値 | |
なし (テーブルは透明) |
|
オブジェクト参照 | |
[window.]document.getElementById(elementID).background
|
bgcolor | NN 3 IE 3 HTML 3.2 |
bgcolor="RRGGBB カラー 16 進数または色の英単語" | オプション |
テーブル全体で、テキストの背景やその他のコンテンツを塗りつぶすための色を指定します。bgcolor 属性と background 属性の両方が指定されている場合、背景イメージの透明部分には背景色が透けて表示されます。HTML 4 では、この属性の代わりに background-color スタイル属性の使用が推奨されています。 |
|
例 | |
<TABLE bgcolor="tan">...</TABLE> |
|
値 | |
RGB 値の 16 進数表記または色の名前の英単語。設定しないと "#000000" (黒) として解釈されます。使用できる色の名前については、付録 A を参照してください。 |
|
既定値 | |
ブラウザ、ブラウザのバージョン、OS によって異なります。 |
|
オブジェクト参照 | |
[window.]document.getElementById(elementID).bgColor
|
border | NN すべて IE すべて HTML 3.2 |
border="pixelCount" | オプション |
table 要素の周りのボーダーの太さ (ピクセルで)。border 属性に値を設定すると、ブラウザはデフォルトでテーブルの内側のセルの周りに細いボーダーを表示します。table 要素のボーダーが表示されている場合、セル間の内部ボーダーの太さは、table 要素の cellspacing 属性によって定義されます。 値を設定せずに border 属性のみを追加すると、他の属性で上書きされない限り、ブラウザによってデフォルトサイズのボーダーがテーブル全体とセル間に表示されます。 ブラウザは、セル内の平らなコンテンツの周りが盛り上がっているように見えるボーダーで 3D 効果を出します。この他にも、bordercolor、bordercolordark、bordercolorlight、frame、rules など、ボーダーの外観に影響する属性は多数あります。テーブル用に表示されるボーダーのタイプは、スタイルシート規則で定義されるボーダーとは異なります。table 要素の専用の属性を使用すると、ボーダーの外観により高いコントロールが得られます。 |
|
例 | |
<TABLE border="1">...</TABLE> |
|
値 | |
正の整数値 |
|
既定値 | |
0 |
|
オブジェクト参照 | |
[window.]document.getElementById(elementID).border
|
bordercolor | NN 4 IE 3 HTML なし |
bordercolor="RRGGBB カラー 16 進数または色の英単語" | オプション |
セルやテーブル全体の周りのボーダー効果を出すピクセルを表示するために使用される色。色を表示するには、border 属性にゼロ以外の値が指定されている必要があります。ページの背景色やデフォルト色の周りに明るい (または白い) 線と暗い線を適切に配置することでボーダーの 3D 効果が作成されます。標準の色はブラウザによって異なりますが、通常グレーと白のバリエーションです。 テーブルのボーダーに色を適用すると、その効果は Navigator と Internet Explorer では異なります。Navigator では、ボーダーを構成する 2 つの色のうち通常暗い色の方に色が適用されます。また、Navigator は線のいくつかの暗さを自動調節し、ボーダーの 3D 効果をさらに最適化します。これとは対照的に、Internet Explorer ではボーダーを構成するすべての線に色が適用されます。よってその全体的効果は 3D 効果をなくし平らにします。IE でボーダーに色をつけ、3D 効果を保つには、bordercolordark 属性および bordercolorlight 属性を参照してください。 |
|
例 | |
<TABLE bordercolor="green" border="2">...</TABLE> |
|
値 | |
RGB 値の 16 進数表記または色の名前の英単語。設定しないと "#000000" (黒) として解釈されます。使用できる色の名前については、付録 A を参照してください。 |
|
既定値 | |
ブラウザや OS によって異なります。 |
|
オブジェクト参照 | |
[window.]document.getElementById(elementID).borderColor
|
bordercolordark、bordercolorlight | NN なし IE 3 HTML なし |
bordercolordark="RRGGBB カラー 16 進数または色の英単語" bordercolorlight="RRGGBB カラー 16 進数または色の英単語" | オプション |
Internet Explorer では、ページの背景色やデフォルト色の周りに明るい線と暗い線を適切に配置することでテーブルボーダーの 3D 効果が作成されます。bordercolordark 属性および bordercolorlight 属性に値を指定すると、暗い線と明るい線に使用される色を個別に制御できます。色を表示するには、border 属性にゼロ以外の値が指定されている必要があります。 通常、属性のペアには補色を指定します。また、bordercolordark に暗い色を指定しなければならないという規則はありません。これらの属性はセルの特定の辺を制御するためのもので、各属性によってボーダーのどの辺が設定されるかがわかるような名前が付いているだけです。 Navigator と IE で同じように表示するには、bordercolor 属性で指定された色の補色、つまり Navigator で 3D 効果に使用される色を決める必要があります。次に、これらの値を bordercolordark 属性と bordercolorlight 属性に指定します。3 つの属性をすべて同じ <TABLE> タグに配置できます。 |
|
例 | |
<TABLE bordercolordark="darkred" bordercolorlight="salmon" border="3">... </TABLE> |
|
値 | |
RGB 値の 16 進数表記または色の名前の英単語。設定しないと "#000000" (黒) として解釈されます。使用できる色の名前については、付録 A を参照してください。 |
|
既定値 | |
OS によって異なります。 |
|
オブジェクト参照 | |
[window.]document.getElementById(elementID).borderColorDark [window.]document.getElementById(elementID).borderColorLight |
cellpadding | NN すべて IE 3 HTML 3.2 |
cellpadding="length" | オプション |
テーブルセルのボーダーとセルコンテンツの間の空いた領域の量。この属性はセルの内側の領域に適用されます。この属性を設定しなくても、ほとんどのブラウザでは、テキストコンテンツの一番左にあるピクセルがセルの左端に接するように表示されます。テーブルにボーダーが表示される場合には、ボーダーの端とコンテンツの間に数ピクセルの余裕を開けると、コンテンツが読みやすくなります。デザインによっては大きな余白を入れた方がよいこともあります。テーブルにボーダーが表示されない場合、この属性では表示があまりはっきりしません。この場合、cellspacing 属性を使用するとセル間のスペースを調整できます。 |
|
例 | |
<TABLE border="2" cellpadding="3">...</TABLE> |
|
値 | |
ピクセル数で示す長さの値または使用可能な領域のパーセント値。パーセント値は、セルの横方向および縦方向に使用可能なスペース全体が基準になります。たとえば、値を 10% に設定すると、左右の余白はそれぞれセルの幅の 5% になり、上下の余白はそれぞれセルの高さの 5% になります。 |
|
既定値 | |
0 |
|
オブジェクト参照 | |
[window.]document.getElementById(elementID).cellPadding
|
cellspacing | NN すべて IE 3 HTML 3.2 |
cellspacing="length" | オプション |
各テーブルセルの外側の辺間に空いたスペース量。table 要素の border 属性を整数値に設定した場合、cellspacing を設定すると、セル間に表示されるボーダーの太さを定義することになります。表示されるボーダーがなくても、セルの間隔によってテーブルの読みやすさが向上します。 |
|
例 | |
<TABLE border="2" cellspacing="10">...</TABLE> |
|
値 | |
正の整数 |
|
既定値 | |
0 (テーブルボーダーなし)、2 (テーブルボーダーあり)。 |
|
オブジェクト参照 | |
[window.]document.getElementById(elementID).cellSpacing
|
cols | NN 4 IE 3 HTML なし |
cols="columnCount" | オプション |
テーブルの列数。HTML 仕様では、この属性は採用されていません。HTML 4 では、この属性の機能は、colgroup および col 要素が担当します。当分の間、cols 属性は古いブラウザと最新のブラウザによって認識されます。この属性は、テーブル表示の準備においてブラウザを補助します。この属性が設定されていない場合、ブラウザはダウンロードされたすべての tr 要素および td 要素を解釈した結果に基づいてテーブルの列数を決定します。 |
|
例 | |
<TABLE cols="4">...</TABLE> |
|
値 | |
正の整数 |
|
既定値 | |
なし |
|
オブジェクト参照 | |
[window.]document.getElementById(elementID).cols
|
datapagesize | NN なし IE 4 HTML なし |
datapagesize="recordCount" | オプション |
IE のデータバインディングと共に使用して、この属性によって設定されたデータソースレコードを表示するために必要なテーブル行数をブラウザに指示します。一般的には、datafld 属性がデータソースの特定の列に固定されている (table 要素内で datasrc が設定されている) テキスト input 属性を表示するテーブルセルを設定するために使用されます。datapagesize 属性が 5 に設定された場合には、ブラウザは 5 行のテーブルを表示します (ただし、行は HTML で一度指定されるのみです)。 |
|
例 | |
<TABLE datasrc="DBSRC3" datapagesize="5"> <TR> <TD><INPUT type="text" datafld="stockNum"></TD> <TD><INPUT type="text" datafld="qtyOnHand"></TD> </TR> </TABLE> |
|
値 | |
正の整数 |
|
既定値 | |
なし |
|
オブジェクト参照 | |
[window.]document.getElementById(elementID).dataPageSize
|
datasrc | NN なし IE 4 HTML なし |
datasrc="dataSourceName" | オプション |
IE のデータバインディングと共に使用して、リモートデータアクセス用にデータソースオブジェクトを読み込むページの object 要素の ID を示します。データソースからのコンテンツは datafld 属性によって設定されます。 テーブルの datapagesize 属性も設定すると、隣接するレコードのブロックをテーブルに表示できます。Macintosh 版 IE 5 ではテキストファイルのデータソースに対してのみ機能します。 |
|
例 | |
<TABLE datasrc="DBSRC3" datapagesize="5">...</TABLE> |
|
値 | |
大文字と小文字を区別する識別子 |
|
既定値 | |
なし |
|
オブジェクト参照 | |
[window.]document.getElementById(elementID).dataSrc
|
dir | NN 6 IE 5 HTML 4 |
dir="direction" | オプション |
要素のテキストで Unicode 標準による表示方向が適用されない場合の文字の表示方向。文字表示の方向は、左から右、または右から左のいずれかです。通常、この属性は lang 属性と共に設定され、現在の方向を上書きする文字表示方向を指定するために使用される必要があります。 |
|
例 | |
<A lang="ar" dir="rtl">Some Unicode Arabic text characters here</A>
|
|
値 | |
ltr | rtl |
|
既定値 | |
ltr |
frame | NN 6 IE 3 HTML 4 |
frame="frameConstant" | オプション |
テーブルの外側のボーダー (border 属性で設定) のうちどの側が表示されるかを定義します。この属性はセル間の内部ボーダーには影響しません。値を指定せずに border 属性を追加すると、frame 属性を border に設定することと同じになります。必要に応じて、すべての設定を CSS ボーダー関連属性で再現することができます。 |
|
例 | |
<TABLE border="3" frame="void">...</TABLE> |
|
値 | |
次のいずれかの大文字と小文字を区別しないフレーム定数 : |
|
既定値 | |
Navigator:void (border=0 の場合)、border (border が他の値の場合)。Internet Explorer:border。 |
|
オブジェクト参照 | |
[window.]document.getElementById(elementID).frame
|
height、width | NN すべて IE 3 HTML 3.2 (width) |
height="length" width="length" | オプション |
テーブルの領域のサイズ。これはブラウザによって計算されるデフォルトサイズとは異なることがあります。これらの属性の値がテーブルセルコンテンツを表示するために最低限必要なスペースを下回る場合、ブラウザは属性設定を上書きして、すべてのコンテンツが表示されるようにします。結果としてテキスト行が折り返されることもあります。また、テーブルのサイズをブラウザによって計算されるサイズ以上にすることもできます。差を埋めるために、空白スペースがテーブルセルの内側に追加表示されます。属性のうち 1 つだけを指定した場合、もう片方の軸に沿ってサイズを自動的に調整するために必要な計算がブラウザによって行われます。 height 属性は HTML 仕様に含まれていないことに注意してください。これはつまり、すべてのセルコンテンツを表示するための最適なテーブルの高さは、デフォルトの幅または属性によって設定された幅に基づいてブラウザによって計算されるということです。OS やブラウザによってテキストコンテンツが表示される相対フォントサイズが異なるため、テーブルの高さをブラウザに計算させるのは珍しいことではありません。 |
|
例 | |
<TABLE width="80%">...</TABLE> |
|
値 | |
ピクセル数で示す長さの値または使用可能な領域のパーセント値 |
|
既定値 | |
コンテンツによって決定されますが、width は 1 つ外側のコンテナの 100% を超えることはできません。IE では 100% を超えるパーセント値は受け付けられません。この場合、テーブルのコンテナにスクロールバーが表示され、レイアウトデザインの視覚的な整合性が得られなくなる可能性があります。 |
|
オブジェクト参照 | |
[window.]document.getElementById(elementID).height [window.]document.getElementById(elementID).width |
hspace、vspace | NN 6 IE なし HTML なし |
hspace="pixels" vspace="pixels" | オプション |
ページ上のテーブル全体の端の外側に透明な余白を挿入します。代わりに CSS の余白関連の属性を使用します。Netscape 6 では、これらの table 要素の属性に "quirks" モードでのみ応答します。DOCTYPE 要素を参照してください。 |
|
例 | |
<TABLE hspace="20" vspace="40">...</TABLE> |
|
値 | |
ピクセル数を示す整数値。 |
|
既定値 | |
0 |
lang | NN 3 IE 4 HTML 4 |
lang="languageCode" | オプション |
要素の属性値およびコンテンツに使用される言語。ブラウザはこの情報を使用して、合字 (特定のフォントでサポートされたり、書き言葉で必要になった場合)、疑問符、およびハイフネーションの処理などの詳細に関して、コンテンツの適切な表示を行います。その他のアプリケーションや検索エンジンでは、スペルチェック辞書の選択やインデックスの作成にこの情報を利用する場合があります。 |
|
例 | |
<SPAN lang="de">Deutsche Bundesbahn</SPAN> |
|
値 | |
大文字と小文字を区別しない言語コード |
|
既定値 | |
ブラウザの既定値 |
|
オブジェクト参照 | |
[window.]document.getElementById(elementID).lang
|
layout | NN 6 IE なし HTML なし |
layout="layoutType" | オプション |
テーブルレイアウトの表示アルゴリズムを制御します。fixed という値は、コンテンツサイズを最小にするのではなく、明示的な高さと幅の設定に従ってテーブルとセルのサイズを変更するようブラウザに指示します。この属性は、table-layout CSS 属性を模倣しています。 |
|
例 | |
<TABLE layout="fixed" width="500">...</TABLE> |
|
値 | |
定数値 : auto | fixed |
|
既定値 | |
auto |
rules | NN 7 IE 3 HTML 4 |
rules="rulesConstant" | オプション |
ブラウザによって表示される、セル間の内部ボーダーの場所を定義します。ボーダーを引いてセルを行列にするようにテーブルを設定する他に、行、列またはある一定のグループを区別するためにボーダーを設定することもできます (thead、tbody、tfoot、colgroup、col)。表示するボーダーに対し、ブール値として、または特定のサイズに設定された border 属性が必要です。Macintosh 版の IE 5 では、セル間のボーダーの罫線を削除するとすき間が残ります。 |
|
例 | |
<TABLE border="3" rules="groups">...</TABLE> |
|
値 | |
次のいずれかの大文字と小文字を区別しない区切り線定数 : |
|
既定値 | |
none (border=0 の場合)、all (border が他の値の場合)。 |
|
オブジェクト参照 | |
[window.]document.getElementById(elementID).rules
|
summary | NN 6 IE 6 HTML 4 |
summary="text" | オプション |
テーブルのテキストによる説明。テーブルセルの目的や編成を説明するために非ビジュアルブラウザが従う指示を含みますが、内容はこれだけに限られません。Netscape 6 でこの要素のコンテキストメニューに表示される [プロパティ] をクリックすると、この属性に指定された URL へのアクティブなリンクが小さなウィンドウに表示されます。バージョン 6 のブラウザでは、この属性にその他の機能はありません。 |
|
例 | |
<TABLE summary="Order form for entry of up to five products.">...</TABLE> |
|
値 | |
引用符で囲んだ文字列 |
|
既定値 | |
なし |
vspace | |
hspace を参照してください。 |
width | |
height を参照してください。 |