<<PREV | TOP | NEXT>>

TABLE の幅

last modified 17th/Nov. 2000

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

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

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

各列の幅

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

width = multi-length [CN]
ピクセル指定;
パーセント指定;
相対比指定;

相対比

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>

表示例;

header1data1,1data1,2
header2data2,1data2.2
width<length> | <%> | auto | inherit

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

<<PREV | TOP | NEXT>>

SEO [PR] [ Windows7 f ^T[o[ Cu`bg SEO
FC2> rbg