[1] HTML の表 (table
要素)
のレンダリングについてです。
[2] 仕様書:
[3] HTML 4 仕様書は、次のようなレンダリング例を挙げています。
summary
属性を利用者が見れるようにするcaption
があればそれをレンダリングthead
や tfoot
があれば、
それをどこにレンダリングするのか UA はしらないといけない。UA が1パスで表を表示するためには、行を明示し (col
),
幅を指定しなければなりません (width
)。
表の方向については dir
属性の解説を参照。
[4] HTML 4 B.5.2 は、次の配置算法を推奨しています。
col
か
colgroup
があれば)、固定配置算法によりレンダリングして構いません。
指定されていなければ自動配置算法を使うべきです。width
が指定されていなければ、視覚UA
は 100%
とみなして書式付けするべきです。caption
) をこまとみなすべきです。
上下の表題は全列にまたがるこま、左右の表題は全行にまたがるこまです。固定配置算法 HTML 4 B.5.2.1:
colgroup
や col
でこの既定の幅を上書きできます。table
の width
でこの既定の幅を上書きできます。
各列の絶対幅から決定することもできます。col
や colgroup
による列数と実際のこま数が一致しない虞もあります。自動配置算法 HTML 4 B.5.2.2: 表のデータを2パスで処理し、表の大きさを決定します。
1パス目: 行の折り返しは無効にして、各こまの最小・最大の幅を調べます。
最大の幅は最長の行で決まります。折り返しがないので、段落は br
が無い限り長い1つの行になります。
最小の幅は最長の文要素 (語、画像など) で決まります
(字下げやリスト記号も考慮に入れます)。
この処理はこまの中の入れ子の表にも適用します。 中の表のこまの最小・最大幅が表の最小・最大幅に影響し、 ひいては外の表のこまの最小・最大幅に影響します。 (この算法はこまの内容の合計に比例し、入れ子の深さには依存しません。)
文字揃えのこまでは、揃え文字 (char
・charoff
)
の左、揃え文字の右、不揃え部に分けて考えます。例えば最小幅は
max (最小左 + 最小右, 最小不揃え)
となります。
次に、こまの最小・最大幅から列の最小・最大幅を決定します。 そして、利用可能な空間を列幅に割り当てます。
複数の列にまたがったこまでは、単純に均分して最小・最大幅を求めます。 またがらないこまの最小・最大幅を使って分割時に重みをつける方法もあります。 実験によれば両者の混合が多くの表に有効のようです。
列幅割当ての際には、表の境界線とこま間の余白を考慮する必要があります。
W := 利用可能な幅 − 最小幅
D := 最大幅 − 最小幅
d := 最大列幅 − 最小列幅
列幅 ← 最小列幅 + dW/D
この幅割当ては、1パス目の最小・最大幅を使って入れ子の表にも繰り返します。
親こまの幅が利用可能な領域
になります。
表の幅が width
で指定されていれば、 UA
はそれに一致するように試みます。 width
を採用すると最小幅より小さくなってしまう時は使いません。
col
で相対幅が指定されている時は、
その幅になるまで増やします。 col
はヒントに過ぎず、
最小幅より小さいときは採用するべきではありません。また、
列を利用可能な空間より広く伸ばすべきでもありません。
相対幅零に指定されていれば、常に最小幅を採用するべきです。
2パス配置算法を使う場合であって、 charoff
属性が明示的に、あるいは継承で指定されていない時には、
align
が char
の列のうちの行で、
揃え文字の前後の部分の幅が最大になる行において、
行を中央に揃えることになるであろう位置を選びます。
徐々にレンダリングしていく場合には、既定値を 50%
とすることを提案します。同じ行の異なる列のこまを文字で揃える場合は、
既定では、該当するすべてのこまを (揃える文字を問わず) 並べるべきです。
(明示又は暗示による) 揃えの結果データが列に割り当てられた幅を超えてしまう場合には、
物体が大き過ぎる場合と同様に処理します。
[5] 岡部克也's w3m ページ <http://www4.ocn.ne.jp/~okabek/w3m.html#table>
w3mの表レンダリング算法 (改善版) についての解説。 (名無しさん [sage])
(名無しさん [sage])