HOMEへ   ホームページを作ろう |レンタルサーバいろいろ
TOPB B SScriptPCMY-LOG
Click Here!

作 成

作 成 2

基礎知識

装 飾 術

<<前へ  |123456789101112131415|  次へ>>

COACHのバッグ・財布・小物を厳選 [PR]

● 行と列の設定

行をグループ分けする

表の行には、『THEAD』要素、『TFOOT』要素、 それに『TBODY』要素を使用して、ヘッダとフッタを1つずつと、 本体を1つ以上のグループにすることができます。 このようにヘッダとフッタを明示することで、ブラウザは表の本体のみをスクロールさせることができたり、 印刷時にはページごとにヘッダとフッタを印刷するなど、 ヘッダとフッタの意味にあった動作をするでしょう。
それぞれの要素には1行以上、行を記述する必要があり、 特にTHEAD要素、TFOOT要素には列を記述する必要があります。
さらに、THEAD要素、TFOOT要素、TBODY要素の列数は同じにする必要があります。

テーブル例
ヘッダ1ヘッダ2ヘッダ3ヘッダ4
フッタ1フッタ2フッタ3フッタ4
見出し1見出し2見出し3見出し4
1行0列1行1列1行2列1行3列
2行0列2行1列2行2列2行3列

<TABLE border summary="TABLE要素の表示例です">
<CAPTION>テーブル例</CAPTION>
<THEAD><TR><TD>ヘッダ1</TD><TD>ヘッダ2</TD><TD>ヘッダ3</TD><TD>ヘッダ4</TD></TR></THEAD>
<TFOOT><TR><TD>フッタ1</TD><TD>フッタ2</TD><TD>フッタ3</TD><TD>フッタ4</TD></TR></TFOOT>
<TBODY>
<TR><TH>見出し1</TH><TH>見出し2</TH><TH>見出し3</TH><TH>見出し4</TH></TR>
<TR><TD>1行0列</TD><TD>1行1列</TD><TD>1行2列</TD><TD>1行3列</TD></TR>
<TR><TD>2行0列</TD><TD>2行1列</TD><TD>2行2列</TD><TD>2行3列</TD></TR>
</TBODY>
</TABLE>

THEAD要素、TFOOT要素はTBODY要素より先に記述しておきます。
そうすることで、ブラウザは、データが記述してある行(TBODY要素)より先に、 ヘッダ・フッタを表示して、閲覧者に表の概要を示すことができます。
THEAD要素とTFOOT要素は、表にヘッダ、フッタを必要とする場合にのみ記述し、共に終了タグは省略することができます。 TBODY要素は、ヘッダ又はフッタがある場合に記述する必要があり、終了タグは省略することができます。

列をグループ分けする

COLGROUP』要素を使用して、列をグループ化することで、一つの表を複数に区分することができます。 これにより例えば、スタイルシートや属性を使用してグループごとに装飾、強調させることが可能になります。
表は、COLGROUP要素を使用しなくても(表全体が1つの列グループの状態で)良く、 列グループを必要としない場合はCOLGROUP要素を記述する必要はありません
また、COLGROUP要素は終了タグを省略することができます。

テーブル例
見出し1見出し2見出し3見出し4
1行0列1行1列1行2列1行3列
2行0列2行1列2行2列2行3列

<TABLE border summary="TABLE要素の表示例です">
<CAPTION>テーブル例</CAPTION>
<COLGROUP span="2" width="15%" style="background-color:silver"></COLGROUP>
<COLGROUP span="2" width="35%" style="background-color:ivory"></COLGROUP>
<TR><TH>見出し1</TH><TH>見出し2</TH><TH>見出し3</TH><TH>見出し4</TH></TR>
<TR><TD>1行0列</TD><TD>1行1列</TD><TD>1行2列</TD><TD>1行3列</TD></TR>
<TR><TD>2行0列</TD><TD>2行1列</TD><TD>2行2列</TD><TD>2行3列</TD></TR>
</TABLE>

COLGROUP要素によって二列ずつのグループに、それぞれに幅を設定し、スタイルシートで背景に色をつけています。

span』属性で、グループにする列の数を設定します。 値は0より大きな整数で、記述しない場合は1で設定されています
span属性が設定されていない場合は、各COLGROUP要素は、1列のみをグループとします。
span属性が0より大きい値で設定されている場合、その属性値分の列をグループとします。
COLGROUP要素にCOL要素が1つでも記述されているときは、 このspan属性の属性値は無視され、COL要素内の値が優先されます。

width』属性は、設定した列グループとなっている各列の幅となります。
標準的な設定では、ピクセル、パーセント、相対値『*』です。
しかし、これに加えて、この属性では列の内容を保持できる最小の幅『0*』(ゼロアスタリスク)という値を設定できます。 ブラウザは、この列幅を正しく調整するために、列全体の内容を知らなければならないため、 すべての列内容を読込んだ後に出力するため、表の画面表示を妨げることになります。
なお、この属性値は、列グループにCOL要素のwidth属性が設定されている場合無視され、 COL要素のwidth属性の属性値が優先されます。

列を設定する

COL』要素は、列の属性をグループ化するのに使用します。 (COLGROUP要素のように列を構造的にグループ化するのではなく、属性をグループ化するためだけの要素です。) COL要素は、空要素で、COLGROUP要素の補助のための要素です。

COL要素は、span属性の属性値の数だけ列を作成し、その作成した列の属性を共有します。 この属性値は0より大きな整数で、記述しない場合は1で設定されています。
width属性を設定すると各列の幅がその属性値になりますが、 この値はCOLGROUP要素のwidth属性と同じ設定となり、このCOL要素の属性値が優先されます。

テーブル例
見出し1見出し2見出し3見出し4
1行0列1行1列1行2列1行3列
2行0列2行1列2行2列2行3列

上の表と同じですが、この表の列は1つグループになっていて、COL要素により、列の数と、背景色が設定されています。
また、このグループ内の列の幅は15%とされていますが、COL要素により、右二つには35%の値が設定されています。
このように、多少表の意味合いが変わっています。

<TABLE border summary="TABLE要素の表示例です">
<CAPTION>テーブル例</CAPTION>
<COLGROUP width="15%" >
<COL span="2" style="background-color:silver">
<COL span="2" width="35%" style="background-color:ivory">
</COLGROUP>
<TR><TH>見出し1</TH><TH>見出し2</TH><TH>見出し3</TH><TH>見出し4</TH></TR>
<TR><TD>1行0列</TD><TD>1行1列</TD><TD>1行2列</TD><TD>1行3列</TD></TR>
<TR><TD>2行0列</TD><TD>2行1列</TD><TD>2行2列</TD><TD>2行3列</TD></TR>
</TABLE>

表中の列を数える

表中の列数は次の2つの方法で決定されます。
COLGROUP要素かCOL要素が含む表を記述する場合は列の数に矛盾が生じないように注意する必要があります。

TABLE要素内にCOLGROUP要素かCOL要素が記述されている場合
COL要素に記述されているspan属性の属性値(記述のないものは1)を計算します。
COLGROUP要素内にCOL要素が1つでも記述されている場合は、 COLGROUP要素のspan属性を無視し、記述されているCOL要素に対して上の計算を行います。
何も含まないCOLGROUP要素に記述されてるいるspan属性の属性値(記述のないものは1)を計算します。
これらの合計が列の幅となります。

TABLE要素にCOLGROUP要素もCOL要素も含まれていない場合
各行が表示することになる列の数から計算します。 各行について表示する列数が異なる場合は、複数セルをまたいでいるセル(結合しているセルの本来の列数)を含めて、 最も多くの列がある行が表示する列の数が表の列数とします。 この時、列数が少なくなる行には、行の末尾(行の末尾は表の方向に依存します。)に空のセルを表示します。

もし、COLGROUP要素かCOL要素を記述して表を表示する場合は、この2つの計算で列数が等しくならなくてはいけません。

表中の列幅を決める

列の幅を決めるには『固定』、『比率(パーセント)』、 『相対比』の3つの方法があります。

・固定幅設定はピクセル単位が使用されます。width="30"のように記述して設定できます。
・パーセントでの設定は表が利用できる水平方向の空間に対する比率となります。 設定には、width="20%"のように、数値のあとに『%』を記述して行います。
・相対比での設定は表が必要とする水平方向の空間に対する比率となります。 設定には、width="3*"のように、数値のあとに『*』を記述して行います

ブラウザは表を表示するに当り、列幅が設定していないと、 適切な幅で表示するために列のデータ全体を読込んでから表示するようになり、 表の表示に時間がかかってしまいます。
この現象は、表全体の幅が固定幅で設定されていない時に、列幅を相対比で設置した場合にも起ります。 ブラウザは、列幅を相対比で分けるために、表の全データを読込まなくてはならないからです。
これは、容易に表の幅を決定できる、固定幅の設定とパーセントの設定では起りません。

<<前へ  |上へ|  次へ>>
123456789101112131415

通信講座であなたもスキルアップ!学ぶ喜びが味わえる詳しい講座案内書を無料送呈中!

TOP] [HOME

更新日時:2014/08/09