<<PREV | TOP | NEXT>>

TABLE の幅

last modified 17th/Nov. 2000

ブラウザにとって、 TABLE の幅の計算は非常に複雑な処理を要求されます。従って、予め記述者が幅を指定できれば、無駄な処理を省略できるるため、速やかに表が表示できます。

1. 表全体の幅を与える: table 要素の width 属性で指定
2. 全体の幅の中で、各列毎の幅を与える: col 要素の width 属性で指定

たったこれだけで、表の幅を完全に指定できます。これが指定されていないと、ブラウザは表の最後の行の最後のセルの内容を読み込み終わらないと、各列の幅を計算できず、表全体を表示出来ないという事になってしまいます。

各列の幅

col 要素の width 属性では、列の幅を指定できます。その値では、固定幅、パーセント、相対比が利用できます (%MultiLength) 。

width = multi-length [CN]

各列の基本幅を指定します。
標準的な指定であるピクセル、パーセント (%) 、相対値 (N*) に加えて、この属性では "0*" が行えます。

ピクセル指定；

ピクセル値で各列の幅を固定的に指定する。
従って、表全体の幅は、各列の幅の総和として結果的に求まる。

パーセント指定；

表全体の幅ではなく、そのとき利用できる水平方向の空間の幅をもとに計算される。
従って、表全体の幅は、各列の幅の総和として結果的に求まる。

相対比指定；

相対比指定は、表全体の幅に対する比率で指定する。
表全体の幅は table 要素の width 属性が指定する。
"0*" は、各列の幅を、列内容を保持できる最小の幅にすることを意味する。
COLGROUP 要素での指定は、各 COLGROUP 要素に含まれる各 COL 要素の width 属性による指定が優先される。

相対比

width 属性の相対値は、例えば 1* のように指定します。

各列幅を、表全体の "1 : 3 : 3" に指定；

<table>
<colgroup>
  <col width="1*">
  <col span="2" width="3*">
</colgroup>
...各行の定義...
</table>

width 属性の "0*" は、相対値の特殊な形式ですが、これが指定されていると、列幅を計算するのにブラウザは列に含まれる全ての内容を知る必要が生じ、漸次的な表示を妨げます。表の表示を遅くし、後続の要素を表示するのも遅らせてしまいますので、指定するときには、あまり行数の多くない表に限るようにした方が安全でしょう。

<table>
<caption>列グループの例</caption>
<colgroup >
  <col span="2" width="1*">
  <col width="3*">
</colgroup>
<colgroup span="2" width="2*">
</colgroup>
...
</table>

この例では、二つの列グループに分けられています。最初の 3 列と、続く 2 列が構造化されており、各グループに含まれる各列の幅は、表全体の幅に対して、 1:1:3:2:2 で分割するように指定されています。

長さの相対指定に関しては、「長さの指定」も参照ください。

この相対比を利用する場合は、表全体の幅を指定しておけないと、表を速やかに表示する事が出来ません。 TABLE 要素の width 属性で明示的に指定します。

table 全体の幅

各列の幅を相対比で指定する場合は、表全体の幅も指定しておかねばなりません。表全体の幅は table 要素の width 属性で指定します。

width = length [CN]

表全体の幅を、視覚系ブラウザを対象に指定します。
値がパーセント値の場合、ユーザエージェントがその時点で利用できる水平方向の幅（左右マージンの間）に対する割合となります。
幅の指定がない場合、表の幅はユーザエージェントによって決定されます。
非推奨属性では有りませんが、一応スタイルシートで指定するように勧められています。

CSS での幅の指定

CSS の 'width' プロパティは、要素の幅を指定できます。

CSS

table { width: 25em }
col.head { width: 5em }
col.data { width: auto }

HTML

<table>
<colgroup>
<col class="head">
<col span="2" class="data">
</colgroup>
...
</table>

表示例；

header1	data1,1	data1,2
header2	data2,1	data2.2

width	`<length> \| <%> \| auto \| inherit`

テキスト inline 要素、 TABLE 行、行グループ要素を除く全ての要素に適用可能です。
初期値は code です。
子孫要素に値が継承しません。
% 指定は利用できる幅全体をもとに計算されます。

inline 要素でも、画像やインライン・フレームなどの置換要素には適用可能です。行関連では、 TR, THEAD, TBODY, TFOOT 要素には適用できません。

<<PREV | TOP | NEXT>>

FC2>		モビット