目次
HTML表モデルにより、著者は、テキスト、整形済みテキスト、画像、リンク、フォーム、フォームのフィールド、別の表などのデータを、コマの行と列とに配置することができる。
表はそれぞれ、対応する表題(CAPTION要素参照)を1個持つことができる。これには表の目的についての簡単な記述をする。 音声ブラウザや点字出力ユーザエージェントの利用者のために、長文の解説もsummary属性によって提供できる。
表の行は、THEAD、TFOOT、及びTBODY要素によって、ヘッダ、フッタ、本体にグループ化してもよい。 行グループは、付加的な構造情報を伝達し、ユーザエージェントによっては、この構造を強調するような方法でレンダリングすることがある。 ユーザエージェントは、ヘッダ・本体・フッタの区分を活用し、ヘッダとフッタから本体を切り離してスクロールするようにできる。 長い表を印刷する場合、表データが含まれる各ページにおいてヘッダ情報とフッタ情報が繰り返されるであろう。
著者はまた、ユーザエージェントが利用できる付加的な構造情報を提供するため、列をグループ化してよい。 さらに著者は、COLGROUP要素とCOL要素を用いて、列プロパティを表定義の冒頭で宣言してもよい。 これは、表のデータ全体が到着するのを待たなければレンダリングを開始できないとういうことをなくし、表を逐次的にレンダリングできるようにするためのものである。
表のコマは、「見出し情報」(TH要素参照)と、「データ」(TD要素参照)の、どちらか1つを含むことができる。 1つのコマが、複数の行や列にわたっていてもよい。 HTML 4の表モデルでは、非視覚系ユーザエージェントがコマの見出し情報をユーザに伝えやすくなるよう、著者は各コマにラベルをつけることができる。 この機構は、視覚障害のあるユーザを大いに助けるのみならず、表示能力に制限のある多機能無線ブラウザ(例えばWeb対応のポケベルや電話)が表を処理することをも可能にする。
非視覚系メディアでのレンダリングに際して問題を起こすことがあるため、単に文書内容を整形する目的だけで表を用いるべきでない。 さらに、見た目のために表が用いられると、その表が大きなディスプレイのあるシステムで作られた場合、表を見るために水平スクロールを強いられることがある。 こうした問題を最小限に押さえるため、著者は文書の整形には表ではなくスタイルシートを用いるべきである。
注意。 表についての詳細情報は、本書の表の設計原理及び実装に関する注意の項にある。
次に、HTML表モデルの機能をいくつか説明する簡素な表を示す。
<TABLE border="1" summary="この表はショウジョウバエに関する調査結果である。 体長と体重、そして赤目の割合(オスメス双方)を 示している。"> <CAPTION><EM>結合したコマがある表の見本</EM></CAPTION> <TR><TH rowspan="2"><TH colspan="2">平均 <TH rowspan="2">赤<BR>目 <TR><TH>体長<TH>体重 <TR><TH>オス<TD>1.9<TD>0.003<TD>40% <TR><TH>メス<TD>1.7<TD>0.002<TD>43% </TABLE>
この表定義は、tty機器では次のようにレンダリングされるであろう。
結合したコマがある表の見本 /-----------------------------------------\ | | 平 均 | 赤 | | |-------------------| 目 | | | 体長 | 体重 | | |-----------------------------------------| | オス | 1.9 | 0.003 | 40% | |-----------------------------------------| | メス | 1.7 | 0.002 | 43% | \-----------------------------------------/
またグラフィック系ユーザエージェントは次のようにレンダリングするであろう。
<!ELEMENT TABLE - - (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)> <!ATTLIST TABLE -- table element -- %attrs; -- %coreattrs、%i18n、%events -- summary %Text; #IMPLIED -- purpose/structure for speech output-- width %Length; #IMPLIED -- table width -- border %Pixels; #IMPLIED -- controls frame width around table -- frame %TFrame; #IMPLIED -- which parts of frame to render -- rules %TRules; #IMPLIED -- rulings between rows and cols -- cellspacing %Length; #IMPLIED -- spacing between cells -- cellpadding %Length; #IMPLIED -- spacing within cells -- >
開始タグ: 必須、終了タグ: 必須
属性定義
別途定義がある属性
TABLE要素は、表題、行、内容、整形に関する、他のすべての要素を包含する。
参考情報として、次に、ユーザエージェントが表のレンダリングを行なう際にどんな作業を実行しているかの説明を列記する。
HTMLの表モデルは、著者の助けを借りることで、ユーザエージェントが、表のデータ全体が到着するのを待つのではなく、行単位でデータが届く毎に、表を逐次的にレンダリングできるように設計されている。
ユーザエージェントが1工程で表を整形できるようにするため、著者はユーザエージェントに次の内容を知らせねばならない。
より正確に言うと、COLGROUP要素とCOL要素の組合せを用いて列幅が指定されている場合には、ユーザエージェントは1工程で表をレンダリングできるであろう。 相対指定やパーセント指定(列幅の計算方法参照)の列が1つでもある場合、著者は表全体の幅も指定しなければならない。
表の方向性は、継承された方向(デフォルトは左-右)か、TABLE要素のdir属性での指定によって、決定される。
左-右の表では、第0列は左側で、第0行は上側である。 右-左の表では、第0列は右側で、第0行は上側である。
ユーザエージェントがある行に追加のコマを割り当てる場合(表中の列数計算)、追加のコマは左-右方向の表においては右端に、右-左方向の表には左端に加えられる。
dir属性の指定が列の視覚的順序を逆転させるのはTABLE要素においてのみであるという点に注意されたい。単独の行(TR)や、単独の列グループ(COLGROUP)は、独立しては逆転できない。
TABLE要素に設定した場合のdir属性は、コマのテキスト方向に対しても影響する。 なぜならdir属性はブロックレベル要素で継承されるからである。
次に、右-左方向の表を指定する、dir属性の設定方法を例示する。
<TABLE dir="RTL"> …残りの表データ… </TABLE>
個々のコマのテキスト方向は、各コマを定めている要素にdir属性を設定することで転換できる。 テキスト方向についての詳細な情報は、双方向性テキストの項を参照されたい。
<!ELEMENT CAPTION - - (%inline;)* -- table caption --> <!ATTLIST CAPTION %attrs; -- %coreattrs、%i18n、%events -- >
開始タグ: 必須、終了タグ: 必須
属性定義
別途定義がある属性
CAPTION要素が存在する場合、そのテキストは表の性質に関する記述を行う必要がある。 CAPTION要素は、TABLE要素の開始タグ直後にのみ存在し得る。 1つの TABLE要素は、1つのCAPTION要素しか包含できない。
視覚系ユーザエージェントであれば、目の見える人は、表題と共に項目見出しを見ることで、表の構造をすぐに把握できる。 その結果、非視覚系ユーザエージェントに頼る人々の観点で考えると、表題が、表の目的や構造の要約としては不十分なものになりがちである。
従って、著者は、TABLE要素のsummary属性を用いて表の目的や構造に関する補完的情報を提供する場合に、注意を払う必要がある。 表題のない表に関しては、得に重要である。 summary属性の用法は、後に例示する。
視覚系ユーザエージェントは、表題を含む表のどの部分をも欠落しないようにする必要がある。 ただし、上下や左右のスクロールなど、表のすべての部分にアクセスできる手段を提供している場合はこの限りでない。 本仕様は、表題テキストを表と同じ幅で折り返すことを推奨する。 これについては推奨するレイアウトアルゴリズムの項も参照されたい。
開始タグ: 必須、終了タグ: 省略可能
<!ELEMENT TBODY O O (TR)+ -- table body -->
開始タグ: 省略可能、終了タグ: 省略可能
<!ATTLIST (THEAD|TBODY|TFOOT) -- table section -- %attrs; -- %coreattrs、%i18n、%events -- %cellhalign; -- horizontal alignment in cells -- %cellvalign; -- vertical alignment in cells -- >
別途定義がある属性
表の各行は、ヘッダとフッタ各1と、1つ以上の本体とにグループ化してよい。 各々のグループ化には、それぞれTHEAD、 TFOOT、及びTBODY要素を用いる。 このように区分することで、ユーザエージェントは、表ヘッダ及びフッタとは独立して表本体をスクロールさせることに対応できる。 また長い表を印刷する際に、表データを含む各ページで、表ヘッダとフッタの情報を繰り返されるようにもなるであろう。
表ヘッダ及びフッタは、表の列についての情報を含む必要がある。表本体は、表データの行を含む必要がある。
存在する場合、各THEAD、TFOOT、及びTBODY要素は、行グループを含む。 どの行グループも、TRが定める、最低1つの行を含まねばならない。
次の例は、表ヘッダ、フッタ、本体の順序と構造を示す。
<TABLE> <THEAD> <TR> …ヘッダの情報… </THEAD> <TFOOT> <TR> …フッタの情報… </TFOOT> <TBODY> <TR> …第1ブロックデータの第1行… <TR> …第1ブロックデータの第2行… </TBODY> <TBODY> <TR> …第2ブロックデータの第1行… <TR> …第2ブロックデータの第2行… <TR> …第2ブロックデータの第3行… </TBODY> </TABLE>
TFOOTは、TABLE定義の中で、TBODYよりも前に出現しなければならない。 そうすることで、ユーザエージェントは、非常に多いかもしれないデータ行をすべて受け取るまで待たなくとも、フッタのレンダリングを行える。 次に、どのタグが必須でどのタグが省略可能かを示す。
適合ユーザエージェントのパーサは、後方互換性のため、この規則に従わねばならない。
前述の例は、いくつか終了タグを省き、次のように短縮化できる。
<TABLE> <THEAD> <TR> …ヘッダの情報… <TFOOT> <TR> …フッタの情報… <TBODY> <TR> …第1ブロックデータの第1行… <TR> …第1ブロックデータの第2行… <TBODY> <TR> …第2ブロックデータの第1行… <TR> …第2ブロックデータの第2行… <TR> …第2ブロックデータの第3行… </TABLE>
THEAD、TFOOT、及び TBODY要素は、各々等しい数の列を含んでいなければならない。
列グループによって、著者は、表の中に構造的な区分を生成できる。 著者はこの構造を、スタイルシートか、TABLE要素のrules属性等のHTMLによって、強調することができる。 列グループの視覚的プレゼンテーションの例は、見本の表を参照されたい。
表は、暗黙的に1つの列グループが含まれる状態(列を区切るCOLGROUP要素が存在しない状態)であっても、明示的に複数の列グループが含まれる状態( COLGROUP要素インスタンスで各々が区切られる状態)であっても構わない。
COL要素を使うと、著者は、構造的グループ化とは別に、複数の列の間で属性の共有を行える。 COL要素の"span"が、属性を共有する列の数を示す。
<!ELEMENT COLGROUP - O (COL)* -- table column group --> <!ATTLIST COLGROUP %attrs; -- %coreattrs、%i18n、%events -- span NUMBER 1 -- default number of columns in group -- width %MultiLength; #IMPLIED -- default width for enclosed COLs -- %cellhalign; -- horizontal alignment in cells -- %cellvalign; -- vertical alignment in cells -- >
開始タグ: 必須、終了タグ: 省略可能
属性定義
1つ以上のCOL要素を含むCOLGROUP要素にこの属性が設定されていた場合、ユーザエージェントは、これを無視しなければならない。
この属性は、当該列グループにある各列のデフォルト幅を指定する。 標準的な指定であるピクセル、パーセント、相対値に加えて、この属性では「0*」(ゼロアスタリスク)という特別な指定が行える。 「0*」という値は、当該グループにある各列の幅を、列内容を保持できる最小の幅にすることを意味する。 これは、列幅を正しく計算するためには、先に列全体の内容を知らねばならないということを示す。 著者は、「0*」を指定するとユーザエージェントの逐次的レンダリングを妨げることになるという点を自覚する必要がある。
別途定義がある属性
COLGROUP要素は、明示的な1つの列グループを生成する。列グループ中の列数は、次の互いに排他的な2つの方法で指定できる。
span属性を用いることの利点は、著者が列幅に関する情報も取りまとめられる点である。 この点から、40個の列を含む表の、各列の幅が20ピクセルであるような場合:
<COLGROUP span="40" width="20"> </COLGROUP>
上のように書く方が下よりも楽である。
<COLGROUP> <COL width="20"> <COL width="20"> …合計40個のCOL要素… </COLGROUP>
もし、グループ中の1列だけ、スタイル情報を変えたり列幅を変えたりなどで別扱いにする必要がある場合、著者はその列をCOL要素で特定しなければならない。 そこで、前の例に出した表で、最後の1列に特別なスタイル情報を適用するためには、次のように書く。
<COLGROUP width="20"> <COL span="39"> <COL id="format-me-specially"> </COLGROUP>
COLGROUP要素のwidth属性は、40列すべてに継承される。 最初のCOL要素は、特別な指定のない最初の39列を示し、2番目のCOL要素は40番目の列にid属性を割り当て、スタイルシートからの参照が可能であるようにしている。
次に例示する表には、2つの列グループが含まれている。 最初のグループには10個の列があり、2番目のグループには5個の列がある。 最初の列グループのデフォルト幅は50ピクセルである。 2番目の列グループの各列の幅は、最小限の幅にされる。
<TABLE> <COLGROUP span="10" width="50"> <COLGROUP span="5" width="0*"> <THEAD> <TR><TD> … </TABLE>
<!ELEMENT COL - O EMPTY -- table column --> <!ATTLIST COL -- column groups and properties -- %attrs; -- %coreattrs、%i18n、%events -- span NUMBER 1 -- COL attributes affect N columns -- width %MultiLength; #IMPLIED -- column width specification -- %cellhalign; -- horizontal alignment in cells -- %cellvalign; -- vertical alignment in cells -- >
開始タグ: 必須、終了タグ: なし
属性定義
別途定義がある属性
COL要素を使うと、著者は、表中の列の属性指定をグループ化できる。 COL要素は、列を構造的にグループ化するものではない。 構造的グループ化はCOLGROUP要素で行なう。 COL要素は空要素であり、属性サポートのためだけに働くものである。 COL要素は、COLGROUP要素による明示的列グループの中に出現しても外に出現してもよい。
COL要素のwidth属性は、当該要素が行き渡る各列の幅を示す。
ある表中の列幅を決定する方法は、次の2つの方法がある。それぞれ記載の順に従う。
ある表にCOLGROUP要素かCOL要素が含まれていて、かつ2つの計算が等しい列数にならない場合、それはエラーである。
いったん表の列数を計算し終えたユーザエージェントは、各列を列グループとしてよい。
次に例示する表の各々は、2つの列数計算手法により、3列であると判定される。 最初の3つは、 逐次的にレンダリングされ得る。
<TABLE> <COLGROUP span="3"></COLGROUP> <TR><TD> … …行… </TABLE> <TABLE> <COLGROUP> <COL> <COL span="2"> </COLGROUP> <TR><TD> … …行… </TABLE> <TABLE> <COLGROUP> <COL> </COLGROUP> <COLGROUP span="2"> <TR><TD> … …行… </TABLE> <TABLE> <TR> <TD><TD><TD> </TR> </TABLE>
著者は、次の3通りの方法で列幅を指定してよい。
しかし、表が固定の幅を指定されていない場合、ユーザエージェントは、表が要求する水平方向の空間を決定するために、表の全データが届くのを待たねばならない。 その後で始めて、相対比による列の幅を割り当てることができる。
著者が列幅情報を指定していない場合、ユーザエージェントは適切な幅を割り当てるために列のデータ全体が届くのを待たねばならないため、逐次的整形をすることはできない。
ある特定のコマにおいて、内容に対して列幅が狭すぎると判明した場合、ユーザエージェントは表を再整形することを選択してよい。
次に例示する表には、6つの列が含まれる。 はじめの列は明示的列グループには属していない。 続く3列は、最初の明示的列グループに属し、残りの2列は2番目の明示的列グループに属している。 この表は、相対比指定の列を含んでいてかつTABLE要素にwidth属性の値がないので、逐次的には整形できない。
この表データをいったん受け取った(視覚系)ユーザエージェントは、現在利用できる水平方向の空間を、次のように割り振る。まず初めに、第1列と第2列へ30ピクセルを割り当てる。 次に、第3列について最小限の幅を確保しておく。 残りの空間は、(2対1対3だから) 6等分される。 第4列(2*)は6分の2、第5列(1*)は6分の1、第6列(3*)は6分の3を受け取る。
<TABLE> <COLGROUP> <COL width="30"> <COLGROUP> <COL width="30"> <COL width="0*"> <COL width="2*"> <COLGROUP align="center"> <COL width="1*"> <COL width="3*" align="char" char=":"> <THEAD> <TR><TD> … …行… </TABLE>
この例で、3番目の列グループにはalign属性が"center"に設定されている。 このグループに属するすべての列のコマは、この値を継承するが、上書きすることもあり得る。 実際、最後のCOL要素は、該当する各列を":"記号に沿って揃える配置指定によって、継承値を上書きする。
次に例示する表の列幅指定では、ユーザエージェントが表を逐次的に整形できる。
<TABLE width="200"> <COLGROUP span="10" width="15"> <COLGROUP width="*"> <COL id="penultimate-column"> <COL id="last-column"> <THEAD> <TR><TD> … …行… </TABLE>
最初の10列は、各々15ピクセル幅となる。 最後の2列は、各々残った50ピクセルの半分ずつを受け取る。 ここで、COL要素が、最後の2列に id属性値を指定するためだけにのみ出現していることに、注意されたい。
<!ELEMENT TR - O (TH|TD)+ -- table row --> <!ATTLIST TR -- table row -- %attrs; -- %coreattrs、%i18n、%events -- %cellhalign; -- horizontal alignment in cells -- %cellvalign; -- vertical alignment in cells -- >
開始タグ: 必須、終了タグ: 省略可能
別途定義がある属性
TR要素は、表のコマから成る行のコンテナとして働く。 終了タグは省略してよい。
次に例示する表には、3つの行があり、各々TR要素で始まっている。
<TABLE summary="この表は各評議員のコーヒー消費について、 何杯飲むか、種類は何か(カフェイン抜きか 通常か)、砂糖は入れるかどうか、を示す。"> <CAPTION>各評議員のコーヒー消費量</CAPTION> <TR> …見出しの行… <TR> …データの第1行… <TR> …データの第2行… …残りのデータ… </TABLE>
<!ELEMENT (TH|TD) - O (%flow;)* -- table header cell, table data cell--> <!-- Scope is simpler than headers attribute for common tables --> <!ENTITY % Scope "(row|col|rowgroup|colgroup)"> <!-- TH is for headers, TD for data, but for cells acting as both use TD --> <!ATTLIST (TH|TD) -- header or data cell -- %attrs; -- %coreattrs、%i18n、%events -- abbr %Text; #IMPLIED -- abbreviation for header cell -- axis CDATA #IMPLIED -- comma-separated list of related headers-- headers IDREFS #IMPLIED -- list of id's for header cells -- scope %Scope; #IMPLIED -- scope covered by header cells -- rowspan NUMBER 1 -- number of rows spanned by cell -- colspan NUMBER 1 -- number of cols spanned by cell -- %cellhalign; -- horizontal alignment in cells -- %cellvalign; -- vertical alignment in cells -- >
開始タグ: 必須、終了タグ: 省略可能
属性定義
別途定義がある属性
表のコマは、見出し情報及びデータという、2種類の情報を含むことができる。 この2つを区別すると、ユーザエージェントは、スタイルシート抜きでも見出しコマとデータコマを区別してレンダリングできる。 例えば、視覚系ユーザエージェントは見出しテキストをボールドなフォントで表示するであろうし、音声合成装置は見出し情報を他と異なる声調でレンダリングするであろう。
TH要素は、見出し情報を含むコマを定める。 ユーザエージェントは、2種類の見出し情報を利用できる。 1つはTH要素の内容で、もう1つは abbr属性の値である。 ユーザエージェントは、コマの内容かabbr属性値のどちらかをレンダリングしなければならない。 視覚系メディアにおいては、コマ内容すべてをレンダリングするのに充分な空間がない場合に、後者を用いるのが適切であろう。 非視覚系メディアにおいては、コマに適用される見出しがコマの内容と共にレンダリングされる場合、見出しの省略形としてabbr属性が用いられるであろう。
headers属性とscope属性によっても、著者は、非視覚系ユーザエージェントが見出し情報を処理するのを助けることができる。 詳細と例示については、非視覚系ユーザエージェントに対するコマのラベルづけの項を参照されたい。
TD要素はデータを含むコマを定める。
コマは、空、すなわちデータを含まない状態であってもよい。
次に例示する表は、4列のデータを含み、各列には列を説明する見出しがついている。
<TABLE summary="この表は各評議員のコーヒー消費について、 何杯飲むか、種類は何か(カフェイン抜きか 通常か)、砂糖は入れるかどうか、を示す。"> <CAPTION>各評議員のコーヒー消費量</CAPTION> <TR> <TH>評議員</TH> <TH>杯</TH> <TH>コーヒーの種類</TH> <TH>砂糖は?</TH> <TR> <TD>T. Sexton</TD> <TD>10</TD> <TD>エスプレッソ</TD> <TD>入れない</TD> <TR> <TD>J. Dinnen</TD> <TD>5</TD> <TD>カフェイン抜き</TD> <TD>入れる</TD> </TABLE>
これをtty機器にレンダリングするユーザエージェントは、次のように表示するであろう。
評議員名 杯 コーヒーの種類 砂糖は? T. Sexton 10 エスプレッソ 入れない J. Dinnen 5 カフェイン抜き 入れる
コマは、複数の行や列をまたぐ場合もある。 あるコマがまたぐ行や列の数は、TH要素及びTD要素のrowspan属性とcolspan属性で設定される。
次に示す表定義では、第4行第2列のコマが、現在列を含めて合計3つの列をまたぐよう設定されている。
<TABLE border="1"> <CAPTION>各評議員のコーヒー消費量</CAPTION> <TR><TH>評議員<TH>杯<TH>コーヒーの種類<TH>砂糖は? <TR><TD>T. Sexton<TD>10<TD>エスプレッソ<TD>入れない <TR><TD>J. Dinnen<TD>5<TD>カフェイン抜き<TD>入れる <TR><TD>A. Soria<TD colspan="3"><em>データなし</em> </TABLE>
この表を視覚系ユーザエージェントがtty機器に対してレンダリングする場合、次のようになるであろう。
各評議員のコーヒー消費量 --------------------------------------------------- |評議員名 |杯 |コーヒーの種類 |砂糖は? | --------------------------------------------------- |T. Sexton |10 |エスプレッソ |入れない | --------------------------------------------------- |J. Dinnen |5 |カフェイン抜き |入れる | --------------------------------------------------- |A. Soria |データなし | ---------------------------------------------------
次の例は、2以上の行や列をまたぐコマの定義が後続のコマにどのように影響するかを、表枠線の助けを借りて示す。 次の表定義を考えよう。
<TABLE border="1"> <TR><TD>1 <TD rowspan="2">2 <TD>3 <TR><TD>4 <TD>6 <TR><TD>7 <TD>8 <TD>9 </TABLE>
コマ"2"が第1行と第2行にまたがるため、第2行の定義はこれを勘定に入れたものとなる。 そこで、第2行中の2番目のTD要素は、実際には当該行の3番目のコマを定めている。 視覚的には、この表はtty機器において次のようにレンダリングされるであろうし――、
------------- | 1 | 2 | 3 | ----| |---- | 4 | | 6 | ----|---|---- | 7 | 8 | 9 | -------------
――グラフィック系ユーザエージェントは次のようにレンダリングするであろう。
ここで、仮にコマ"6"を定めるTD要素が欠落していた場合、行を完成させるためにユーザエージェントが空のコマを追加する点に、注意されたい。
以上と同様に、次の表定義を考えよう。
<TABLE border="1"> <TR><TD>1 <TD>2 <TD>3 <TR><TD colspan="2">4 <TD>6 <TR><TD>7 <TD>8 <TD>9 </TABLE>
コマ"4"が、2つの列をまたいでいるので、当該行の2番目のTD要素は、実際には3番目であるコマ"6"を定めている。
------------- | 1 | 2 | 3 | --------|---- | 4 | 6 | --------|---- | 7 | 8 | 9 | -------------
グラフィック系ユーザエージェントは、これを次のようにレンダリングするであろう。
重複するコマを定義することは、エラーである。 ユーザエージェントがこのエラーをどう処理するかは様々である。例えば、レンダリングが異なり得る。
次に示す不正な例は、重複コマがどのように生成され得るかを示す。 この表では、コマ"5"が2つの行をまたぎ、コマ"7"が2つの列をまたぐ。 そこで、コマ"7"とコマ"9"の間にあるコマで重複がある。
<TABLE border="1"> <TR><TD>1 <TD>2 <TD>3 <TR><TD>4 <TD rowspan="2">5 <TD>6 <TR><TD colspan="2">7 <TD>9 </TABLE>
注意。 この節では、視覚整形に関するHTML表の属性について説明する。 本仕様が1997年に最初に出版された際、[CSS1]は表の視覚整形すべてを制御する機構を用意していなかった。 後に、[CSS2]において、表の視覚整形を行えるプロパティが加えられた。
HTML 4 には、以下を制御する機構が含まれている。
次の属性は、表の外枠と内部の罫線に影響する。
属性定義
表の各コマを区別するために、TABLE要素の border属性を設定することができる。 前述の例を考えよう。
<TABLE border="1" summary="この表は各評議員のコーヒー消費について、 何杯飲むか、種類は何か(カフェイン抜きか 通常か)、砂糖は入れるかどうか、を示す。"> <CAPTION>各評議員のコーヒー消費量</CAPTION> <TR> <TH>評議員</TH> <TH>杯</TH> <TH>コーヒーの種類</TH> <TH>砂糖は?</TH> <TR> <TD>T. Sexton</TD> <TD>10</TD> <TD>エスプレッソ</TD> <TD>入れない</TD> <TR> <TD>J. Dinnen</TD> <TD>5</TD> <TD>カフェイン抜き</TD> <TD>入れる</TD> </TABLE>
次の例では、ユーザエージェントは表の左端と右端に5ピクセルの太さで枠線を示し、各列の間に罫線を引く必要がある。
<TABLE border="5" frame="vsides" rules="cols"> <TR> <TD>1 <TD>2 <TD>3 <TR> <TD>4 <TD>5 <TD>6 <TR> <TD>7 <TD>8 <TD>9 </TABLE>
後方互換性のため、ユーザエージェントは次の設定を守る必要がある。
例えば、次の2つの定義は各々等価である。
<TABLE border="2"> <TABLE border="2" frame="border" rules="all">
次の2つの定義もまた、等価である。
<TABLE border> <TABLE frame="border" rules="all">
次の属性は、表の異なる要素に設定され得る。要素定義を参照のこと。
<!-- horizontal alignment attributes for cell contents --> <!ENTITY % cellhalign "align (left|center|right|justify|char) #IMPLIED char %Character; #IMPLIED -- alignment char, e.g. char=':' -- charoff %Length; #IMPLIED -- offset for alignment char --" > <!-- vertical alignment attributes for cell contents --> <!ENTITY % cellvalign "valign (top|middle|bottom|baseline) #IMPLIED" >
属性定義
charoffを桁揃え文字のオフセットに用いる場合、オフセットする方向は、dir属性で設定される現在のテキスト方向に依存する。 デフォルトである左-右方向のテキストの場合、左マージンからオフセットする。 右-左方向のテキストでは、右マージンからオフセットする。 ユーザエージェントは、この属性をサポートしなくてもよい。
次の例示する表では、小数点に沿って通貨の値を揃えられる。 配置文字として"."が明示されている。
<TABLE border="1"> <COLGROUP> <COL><COL align="char" char="."> <THEAD> <TR><TH>野菜<TH>キロ単価 <TBODY> <TR><TD>レタス <TD>$1 <TR><TD>人参 <TD>$10.50 <TR><TD>カブ <TD>$100.30 </TABLE>
整形された表は、次のような具合になるであろう。
------------------ |野菜 |キロ単価| |-------|--------| |レタス | $1 | |-------|--------| |人参 | $10.50 | |-------|--------| |カブ |$100.30 | ------------------
コマ内容がchar属性で指定された桁揃え文字のインスタンスを1つ以上含んでいて、しかも折り返される場合のユーザエージェントの挙動は、規定しない。 従って、著者はcharの使用には注意が必要である。
注意。 視覚系ユーザエージェントは、典型的にはTH要素をコマ内で垂直方向にも水平方向にも中央に揃え、ボールドなウエイトのフォントでレンダリングする。
コマ内容の配置は、個々のコマ毎に指定することもできるし、表自体や、行や列などコマを包含する要素から継承することもできる。
次に、 align、char、及び charoff属性について、優先順位が高い方から列挙する。
次に、valign属性(並びに、継承される他の属性であるlang、dir、及びstyle)について、優先順位の高い方から列挙する。
更に、コマをレンダリングする場合、水平方向の配置指定では列が行に優先し、垂直方向の配置指定では行が列に優先する。
コマのデフォルト配置は、ユーザエージェントに依存する。 しかし、ユーザエージェントは、現在の方向性のデフォルト属性に応じて決定する必要がある。 すなわち、常に左-右方向とは限らない。
align属性の値"justify"をサポートしないユーザエージェントは、代わりに継承した方向性の値を用いる必要がある。
属性定義
この2つの属性は、コマ同志の間の空間と、コマ内部の空間を制御する。 次に、この2つの関係を説明する。
次の例では、cellspacing属性が、コマ同志の離れ具合と、コマと表の枠との離れ具合とを、各々20ピクセルにすべしと指定している。 cellpadding属性は、コマ内の上マージンと下マージンについて、コマ内容から、利用可能な垂直空間の10%(上と下で合計20%)離れているよう指定している。同様に、コマ内の左マージンと右マージンは、コマ内容から、利用可能な水平空間の10%(合計20%)離れているよう指定している。
<TABLE cellspacing="20" cellpadding="20%"> <TR> <TD>Data1 <TD>Data2 <TD>Data3 </TABLE>
表自体あるいは所定の列が固定幅であった場合、cellspacing属性及びcellpadding属性は、割り当てられた分量よりも多くの空間を必要とする場合もあり得る。 ユーザエージェントは、衝突が起こる場合はこの両属性に対してwidth属性よりも優先権を与えてもよいが、必ずしもそうしなくてよい。
例えば音声合成装置や点字出力機器などの非視覚系ユーザエージェントは、表の内容をより直感的に理解しやすくレンダリングできるよう、次に示すTD要素とTH要素の属性を利用できる。
次の例では、headers属性の設定で見出し情報がコマに割り当てられている。 同一列にあるすべてのコマは、id属性により、同じ見出しコマを参照する。
<TABLE border="1" summary="この表は各評議員のコーヒー消費について、 何杯飲むか、種類は何か(カフェイン抜きか 通常か)、砂糖は入れるかどうか、を示す。"> <CAPTION>各評議員のコーヒー消費量</CAPTION> <TR> <TH id="t1">評議員</TH> <TH id="t2">杯</TH> <TH id="t3" abbr="種類">コーヒーの種類</TH> <TH id="t4">砂糖は?</TH> <TR> <TD headers="t1">T. Sexton</TD> <TD headers="t2">10</TD> <TD headers="t3">エスプレッソ</TD> <TD headers="t4">入れない</TD> <TR> <TD headers="t1">J. Dinnen</TD> <TD headers="t2">5</TD> <TD headers="t3">カフェイン抜き</TD> <TD headers="t4">入れる</TD> </TABLE>
音声合成装置は、この表を次のようにレンダリングするであろう。
表題: 各評議員のコーヒー消費量 概要: この表は各評議員のコーヒー消費について、何杯飲むか、 種類は何か(カフェイン抜きか通常か)、砂糖は入れるか どうか、を示す。"> 評議員: T. Sexton、 杯: 10、 種類: エスプレッソ、 砂糖は: 入れない 評議員: J. Dinnen、 杯: 5、 種類: カフェイン抜き、 砂糖は: 入れる
ここで、「コーヒーの種類」の見出しがabbr属性を用いて「種類」と省略化されている点に、注意されたい。
次に、headers属性の代わりにscope属性を用いた同じ例を示す。 scope属性の値"col"が、「現在の列に含まれるすべてのコマ」を意味する点に注意されたい。
<TABLE border="1" summary="この表は各評議員のコーヒー消費について、 何杯飲むか、種類は何か(カフェイン抜きか 通常か)、砂糖は入れるかどうか、を示す。"> <CAPTION>各評議員のコーヒー消費量</CAPTION> <TR> <TH scope="col">評議員</TH> <TH scope="col">杯</TH> <TH scope="col" abbr="種類">コーヒーの種類</TH> <TH scope="col">砂糖は?</TH> <TR> <TD>T. Sexton</TD> <TD>10</TD> <TD>エスプレッソ</TD> <TD>入れない</TD> <TR> <TD>J. Dinnen</TD> <TD>5</TD> <TD>カフェイン抜き</TD> <TD>入れる</TD> </TABLE>
次に、scope属性の他の値を説明する、いくらか複雑な例を示す。
<TABLE border="1" cellpadding="5" cellspacing="2" summary="バースの歴史学の市民講座について、講座名、 講師、概要、コード、費用をまとめた表"> <TR> <TH colspan="5" scope="colgroup">市民講座――バース、1997年秋</TH> </TR> <TR> <TH scope="col" abbr="講座">講座名</TH> <TH scope="col" abbr="講師">講師の名前</TH> <TH scope="col">概要</TH> <TH scope="col">コード</TH> <TH scope="col">費用</TH> </TR> <TR> <TD scope="row">イギリス市民革命後の時代</TD> <TD>John Wroughton 博士</TD> <TD> 1646年以降のイングランドの大混乱の時代を説明するものです。 <EM>10月13日月曜日から6週間の講座です。</EM> </TD> <TD>H27</TD> <TD>£32</TD> </TR> <TR> <TD scope="row">イングランドにおけるアングロサクソンについて</TD> <TD>Mark Cottle</TD> <TD> 中世初期におけるアングロサクソン社会の再編成に 関する1日限りの講座です。 <EM>10月18日土曜日。</EM> </TD> <TD>H28</TD> <TD>£18</TD> </TR> <TR> <TD scope="row">栄光はギリシャにあり</TD> <TD>Valerie Lorenz</TD> <TD> 民主主義と哲学の生誕地にして、演劇の故郷、そして 論議の生家。ローマにもあったかもしれないが、ギリシア こそが発祥であった。 <EM>1997年10月25日土曜日の全日講座。</EM> </TD> <TD>H30</TD> <TD>£18</TD> </TR> </TABLE>
グラフィック系ユーザエージェントは、これを次のようにレンダリングするであろう。
ここで、値が"row"であるscope属性の用法に注意されたい。 各行の最初のコマはデータを含むものであって、見出し情報を含むものではない。 このデータコマを、scope属性が、行見出しのコマであるかのように働かせているのである。 これにより、音声合成装置は、要求によってコース名を提供したり、各コマ内容の直前で述べたりできる。
音声ベースのユーザエージェントで表をブラウズしているユーザは、コマ内容自体に加えて、コマ内容についての説明をも聞きたいと願うこともあるだろう。 ユーザエージェントが説明を提供できる1つの方法は、データのコマ内容を話す前に関連見出し情報を話すことである(データのコマと見出し情報との連携の項を参照)。
ユーザはまた、 headers、scope、及びabbr属性によってコマのレベルで提供される見出し情報からは十分な文脈を得られずに、複数のコマに関する情報を得たいと願うこともあるだろう。 次に示す、サンノゼとシアトルを数日間旅行した際の食費・ホテル代・交通費の収支表を通じて考えよう。
ユーザは、この表から、問い合わせのフォームによって情報を抽出したいと願う場合もあるだろう。
どの問い合わせも、ユーザエージェントによる、0個以上のコマを含むであろう計算を必要とする。 例えば、8月25日の食費を決定するためには、ユーザエージェントは、どのコマが「食費」を参照し、どのコマが「日付」(特に8月25日)を参照しているかを参照しているかを知り、双方が交差する部分を理解しなければならない。
この種の問い合わせを可能にするために、HTML 4の表モデルを使うと、著者は見出しコマとデータコマをカテゴリーに分けることができる。 例えば、旅費の表では、著者はグループ見出しコマ「サンノゼ」と「シアトル」を「場所」のカテゴリーとし、「食費」「ホテル」「交通費」を「支出」カテゴリー、日付4つを「日付」とすることができる。 そこで、前述の3つの問い合わせは、次のような意味を持つと言える。
著者は、見出しコマやデータコマを、当該コマにaxis属性を設定することでカテゴリーづけできる。 例えば、旅費の表では、次のようにして「サンノゼ」を「場所」にカテゴリーづけできる。
<TH id="a6" axis="場所">サンノゼ</TH>
「サンノゼ」に関連する情報を含むすべてのコマは、 headers属性かscope属性によって、この見出しコマを参照する必要がある。 そこで、1997年8月25日の食費は、「サンノゼ」見出しコマのid属性値"a6"を参照する様マーク付けされる必要がある。
<TD headers="a6">37.74</TD>
どのheaders属性も、参照するidのリストを提供する。 そこで著者は、あるコマについて何通りにでも(または幾つの「"headers"」ででも)カテゴリーづけできる。
次は、旅費の表にカテゴリー情報を併せてマーク付けしたものである。
<TABLE border="1" summary="この表は、8月に行われた サンノゼおよびシアトルへの旅行中の 支出についてまとめたものです。"> <CAPTION> 旅費細目表 </CAPTION> <TR> <TH></TH> <TH id="a2" axis="支出">食費</TH> <TH id="a3" axis="支出">ホテル代</TH> <TH id="a4" axis="支出">交通費</TH> <TD>横計</TD> </TR> <TR> <TH id="a6" axis="場所">サンノゼ</TH> <TH></TH> <TH></TH> <TH></TH> <TD></TD> </TR> <TR> <TD id="a7" axis="日付">97年8月25日</TD> <TD headers="a6 a7 a2">37.74</TD> <TD headers="a6 a7 a3">112.00</TD> <TD headers="a6 a7 a4">45.00</TD> <TD></TD> </TR> <TR> <TD id="a8" axis="日付">97年8月26日</TD> <TD headers="a6 a8 a2">27.28</TD> <TD headers="a6 a8 a3">112.00</TD> <TD headers="a6 a8 a4">45.00</TD> <TD></TD> </TR> <TR> <TD>小計</TD> <TD>65.02</TD> <TD>224.00</TD> <TD>90.00</TD> <TD>379.02</TD> </TR> <TR> <TH id="a10" axis="場所">シアトル</TH> <TH></TH> <TH></TH> <TH></TH> <TD></TD> </TR> <TR> <TD id="a11" axis="日付">97年8月27日</TD> <TD headers="a10 a11 a2">96.25</TD> <TD headers="a10 a11 a3">109.00</TD> <TD headers="a10 a11 a4">36.00</TD> <TD></TD> </TR> <TR> <TD id="a12" axis="日付">97年8月28日</TD> <TD headers="a10 a12 a2">35.00</TD> <TD headers="a10 a12 a3">109.00</TD> <TD headers="a10 a12 a4">36.00</TD> <TD></TD> </TR> <TR> <TD>小計</TD> <TD>131.25</TD> <TD>218.00</TD> <TD>72.00</TD> <TD>421.25</TD> </TR> <TR> <TH>合計</TH> <TD>196.27</TD> <TD>442.00</TD> <TD>162.00</TD> <TD>800.27</TD> </TR> </TABLE>
こうした方法で表をマーク付けすることで、ユーザエージェントに対し、不要な情報でユーザが混乱するのを回避できるようにさせられるという点にも注意されたい。 例えば、音声合成装置が、「食費は全部で幾らだったか?」という問い合わせに対して応答する際に、「食費」の列にあるすべての数字を音声化してしまうとユーザは日々の支出を小計や合計と区別することができない。 コマのデータを注意深くカテゴリーづけすることで、著者はユーザエージェントに対し、レンダリングの際の重要なセマンティクス的区別を可能にさせられる。
当然ながら、著者が表の情報をカテゴリーづけする方法について、制限はない。 例えば旅費の表では、「小計」や「合計」というカテゴリーを追加できる。
本仕様は、ユーザエージェントに対してaxis属性が提供する情報を処理することを要求することもなければ、ユーザエージェントが axis属性の情報をユーザに対してどのように示すべきか、及びユーザがどのように問い合わせを行なうべきかについて推奨することもない。
しかし、ユーザエージェント、特に音声合成装置 は、問い合わせの結果である複数コマに共通する情報を抽出したいと考える場合があるだろう。 例えば、ユーザが「サンノゼでの食費は幾らだったか?」と問い合わせた場合、ユーザエージェントはまず問い合わせに合致するコマ(1997年8月25日: 37.74、1997年8月26日: 27.28)を決定し、次にこの情報をレンダリングする。 これを音声化するユーザエージェントは、次のように読み上げるであろう。
場所: サンノゼ。日付: 1997年8月25日。支出・食費: 37.74 場所: サンノゼ。日付: 1997年8月26日。支出・食費: 27.28
また、更に簡略にする場合もあろう。
サンノゼ、1997年8月25日、食費: 37.74 サンノゼ、1997年8月26日、食費: 27.28
より経済的なレンダリングは、共通項を省き、順序を組み換えるものである。
サンノゼ、食費、1997年8月25日: 37.74 1997年8月26日: 27.28
この主のレンダリングをサポートするユーザエージェントは、例えばスタイルシートなどを通じてレンダリングをカスタム化する方法をユーザに提供するべきである。
見出し情報が、scope属性からもheaders属性からも得られない場合、ユーザエージェントは、次のアルゴリズムで見出し情報を構成してよい。 このアルゴリズムの目標は、見出しの序列リストを検知することである。 以下の説明においては、表の方向性は左-右方向であると仮定する。
次の例は、行と列のグループ化を示す。 この表は、Nadine Kanoの『Developing International Software (国際化ソフトウエアの開発)』から採られた。
次の表を "ascii art" で示すとどうなるか。
<TABLE border="2" frame="hsides" rules="groups"
summary="Code page support in different versions
of MS Windows.">
<CAPTION>CODE-PAGE SUPPORT IN MICROSOFT WINDOWS</CAPTION>
<COLGROUP align="center">
<COLGROUP align="left">
<COLGROUP align="center" span="2">
<COLGROUP align="center" span="3">
<THEAD valign="top">
<TR>
<TH>Code-Page<BR>ID
<TH>Name
<TH>ACP
<TH>OEMCP
<TH>Windows<BR>NT 3.1
<TH>Windows<BR>NT 3.51
<TH>Windows<BR>95
<TBODY>
<TR><TD>1200<TD>Unicode (BMP of ISO/IEC-10646)<TD><TD><TD>X<TD>X<TD>*
<TR><TD>1250<TD>Windows 3.1 Eastern European<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1251<TD>Windows 3.1 Cyrillic<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1252<TD>Windows 3.1 US (ANSI)<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1253<TD>Windows 3.1 Greek<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1254<TD>Windows 3.1 Turkish<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1255<TD>Hebrew<TD>X<TD><TD><TD><TD>X
<TR><TD>1256<TD>Arabic<TD>X<TD><TD><TD><TD>X
<TR><TD>1257<TD>Baltic<TD>X<TD><TD><TD><TD>X
<TR><TD>1361<TD>Korean (Johab)<TD>X<TD><TD><TD>**<TD>X
<TBODY>
<TR><TD>437<TD>MS-DOS United States<TD><TD>X<TD>X<TD>X<TD>X
<TR><TD>708<TD>Arabic (ASMO 708)<TD><TD>X<TD><TD><TD>X
<TR><TD>709<TD>Arabic (ASMO 449+, BCON V4)<TD><TD>X<TD><TD><TD>X
<TR><TD>710<TD>Arabic (Transparent Arabic)<TD><TD>X<TD><TD><TD>X
<TR><TD>720<TD>Arabic (Transparent ASMO)<TD><TD>X<TD><TD><TD>X
</TABLE>
上の表を "ascii art" で示すと、次のようにレンダリングされる。
CODE-PAGE SUPPORT IN MICROSOFT WINDOWS
===============================================================================
Code-Page | Name | ACP OEMCP | Windows Windows Windows
ID | | | NT 3.1 NT 3.51 95
-------------------------------------------------------------------------------
1200 | Unicode (BMP of ISO 10646) | | X X *
1250 | Windows 3.1 Eastern European | X | X X X
1251 | Windows 3.1 Cyrillic | X | X X X
1252 | Windows 3.1 US (ANSI) | X | X X X
1253 | Windows 3.1 Greek | X | X X X
1254 | Windows 3.1 Turkish | X | X X X
1255 | Hebrew | X | X
1256 | Arabic | X | X
1257 | Baltic | X | X
1361 | Korean (Johab) | X | ** X
-------------------------------------------------------------------------------
437 | MS-DOS United States | X | X X X
708 | Arabic (ASMO 708) | X | X
709 | Arabic (ASMO 449+, BCON V4) | X | X
710 | Arabic (Transparent Arabic) | X | X
720 | Arabic (Transparent ASMO) | X | X
===============================================================================
グラフィック系ユーザエージェントは、これを次のようにレンダリングするであろう。
この例は、列をグループ化してデフォルトのコマ内配置を設定するために、COLGROUP要素をどのように使えるかを示している。 同様に、TBODY要素が、行のグループ化に使われている。 frame属性とrules属性は、ユーザエージェントに対し、どの枠線と罫線をレンダリングすべきかを示す。