[1] [[HTML]] の[[表]] ([CODE(HTMLe)[[[table]]]] 要素)
の[[レンダリング]]についてです。
[2]
仕様書:
- [[HTML 4]]
--
-- [CITE[B.5 Notes on tables]]
[3]
HTML 4 仕様書は、次のようなレンダリング例を挙げています。
- [CODE(HTMLa)[summary]] 属性を利用者が見れるようにする
- [CODE(HTMLe)[caption]] があればそれをレンダリング
- [CODE(HTMLe)[thead]] や [CODE(HTMLe)[tfoot]] があれば、
それをどこにレンダリングするのか UA はしらないといけない。
-- 頁媒体で表が複数頁に亘るなら、各頁にレンダリング
-- Scroll 表示するなら、その前後にレンダリング
- [[行群]]指定があればそれに従ってレンダリング
- 行や列やこまは集団化指定に従って適切にレンダリング
- 視覚的 UA は HTML の属性や[[スタイル・シート]]の指定に従うべき
- 全体の到着を待ちつつ順次レンダリング
UA が1パスで表を表示するためには、[[行]]を明示し ([CODE(HTMLe)[[[col]]]]),
幅を指定しなければなりません ([CODE(HTMLa)[[[width]]]])。
表の方向については [CODE(HTMLa)[[[dir]]]] 属性の解説を参照。
[[#comment]]
* 推奨配置算法
[4] HTML 4 B.5.2 は、次の[RUBY[配置算法][レイアウト・アルゴリズム]]を推奨しています。
- 明示的に[[列]]数が指定されていれば ([CODE(HTMLe)[[[col]]]] か
[CODE(HTMLe)[[[colgroup]]]] があれば)、固定配置算法によりレンダリングして構いません。
指定されていなければ自動配置算法を使うべきです。
- [CODE(HTMLa)[[[width]]]] が指定されていなければ、[[視覚UA]]
は [CODE(HTML)[100%]] とみなして書式付けするべきです。
- [[こま]]の内容が指定された幅に収まりきらない時は、幅を広げることを推奨します。
過度の水平 scroll が必要だったり、水平 scroll
が不適当な時には、[[語]]を割っても構いません。
- 配置の際には表題 ([CODE(HTMLe)[[[caption]]]]) をこまとみなすべきです。
上下の表題は全列にまたがるこま、左右の表題は全行にまたがるこまです。
[DFN[[RUBYB[固定配置算法][fixed layout algorithm]]]] [SRC[HTML 4 B.5.2.1]]:
- 列数は既知とします。
- 列幅ははじめ同じ幅とするべきです。著者は [CODE(HTMLe)[[[colgroup]]]]
や [CODE(HTMLe)[[[col]]]] でこの既定の幅を上書きできます。
- 既定の表の幅は左右余白の間の空間とします。著者は [CODE(HTMLe)[[[table]]]]
の [CODE(HTMLa)[[[width]]]] でこの既定の幅を上書きできます。
各列の絶対幅から決定することもできます。
- 列の幅は、まず絶対幅指定の列に表の幅を割り振って、
残った幅を相対幅指定の列に分割します。
- 実際には [CODE(HTMLe)[col]] や [CODE(HTMLe)[colgroup]]
による列数と実際のこま数が一致しない虞もあります。
- 列の幅にこまの内容が収まりきらないことがあります。
-- UA は[[ハイフン付け]]するなり語をぶった切るなり、
うまく切り抜けるよう試みることを推奨します。
-- 分割できない要素がある時は、列幅を調整して再レンダリングしても構いません。
-- Scroll 可能にすることもできます。
-- 最悪の場合は収まる範囲だけ刳り貫くことになるかもしれません。
-- いずれにせよ、分断したり刳り貫いたりする時は利用者に適当な方法で知らせるべきです。
[DFN[[RUBYB[自動配置算法][autolayout algorithm]]]] [SRC[HTML 4 B.5.2.2]]:
表のデータを2パスで処理し、表の大きさを決定します。
1パス目: 行の折り返しは無効にして、各こまの最小・最大の幅を調べます。
最大の幅は最長の行で決まります。折り返しがないので、段落は [CODE(HTMLe)[[[br]]]]
が無い限り長い1つの行になります。
最小の幅は最長の文要素 (語、画像など) で決まります
([[字下げ]]や[[リスト]]記号も考慮に入れます)。
この処理はこまの中の入れ子の表にも適用します。
中の表のこまの最小・最大幅が表の最小・最大幅に影響し、
ひいては外の表のこまの最小・最大幅に影響します。
(この算法はこまの内容の合計に比例し、入れ子の深さには依存しません。)
文字揃えのこまでは、揃え文字 ([CODE(HTMLa)[[[char]]]]・[CODE(HTMLa)[[[charoff]]]])
の左、揃え文字の右、不揃え部に分けて考えます。例えば最小幅は
[CODE(math)[max (最小[SUB[左]] + 最小[SUB[右]], 最小[SUB[不揃え]])]] となります。
次に、こまの最小・最大幅から列の最小・最大幅を決定します。
そして、利用可能な空間を列幅に割り当てます。
複数の列にまたがったこまでは、単純に均分して最小・最大幅を求めます。
またがらないこまの最小・最大幅を使って分割時に重みをつける方法もあります。
実験によれば両者の混合が多くの表に有効のようです。
列幅割当ての際には、表の境界線とこま間の余白を考慮する必要があります。
- 最小表幅が利用可能な領域以上の時: 最小幅を割当て、利用者が水平 scroll
可能にします。
-- 点字変換では、こまの内容を別の場所に置いて、
そこへの参照に書き換える必要があるでしょう。
内容は慣習上表の前に置きます。
- 最大幅が利用可能な領域内に収まる時: 列幅は最大幅にします。
- 表の最大幅は利用可能な領域よりも大きいが、
表の最小幅は利用可能な領域より小さい時:
-= [CODE(math)[[VAR[W]] := 利用可能な幅 − 最小幅]]
-= [CODE(math)[[VAR[D]] := 最大幅 − 最小幅]]
-= 各列について、 [CODE(math)[[VAR[d]] := 最大列幅 − 最小列幅]]
-= 各列について、 [CODE(math)[列幅 ← 最小列幅 + dW/D]]
-- こうすると、最小・最大の差が大きい列を差が小さい列より大きくできます。
この幅割当ては、1パス目の最小・最大幅を使って入れ子の表にも繰り返します。
親こまの幅が[Q[利用可能な領域]]になります。
表の幅が [CODE(HTMLa)[[[width]]]] で指定されていれば、 UA
はそれに一致するように試みます。 [CODE(HTMLa)[width]]
を採用すると最小幅より小さくなってしまう時は使いません。
[CODE(HTMLe)[col]] で相対幅が指定されている時は、
その幅になるまで増やします。 [CODE(HTMLe)[col]] はヒントに過ぎず、
最小幅より小さいときは採用するべきではありません。また、
列を利用可能な空間より広く伸ばすべきでもありません。
相対幅零に指定されていれば、常に最小幅を採用するべきです。
2パス配置算法を使う場合であって、 [CODE(HTMLa)[[[charoff]]]]
属性が明示的に、あるいは継承で指定されていない時には、
[CODE(HTMLa)[[[align]]]] が [CODE(HTML)[[[char]]]] の列のうちの行で、
揃え文字の前後の部分の幅が最大になる行において、
行を中央に揃えることになるであろう位置を選びます。
徐々にレンダリングしていく場合には、既定値を [CODE(HTML)[50%]]
とすることを提案します。同じ行の異なる列のこまを文字で揃える場合は、
既定では、該当するすべてのこまを (揃える文字を問わず) 並べるべきです。
(明示又は暗示による) 揃えの結果データが列に割り当てられた幅を超えてしまう場合には、
物体が大き過ぎる場合と同様に処理します。