lHTML　表 目的別 ( その他 ) '96.12. 6
l.お知らせ　内容　LINK　FILE 　 HTML　Win　PC　Unix　MS-DOS　C　C++　Mfc　Java　
.全般_ .文字 _配置 　表 _リンク .フレ-ム 　ＣＧＩ .タグ一覧.
登録_ .音・画. .スタイル .マ-キ-. .ActiveX. 　---　 .色の名前. _色一覧
　 使用できるタグ 　 基本的用例 　 目的別 　２ 　３ 　 IExplore専用 　
[背景 ] 　項目の背景色 　全体・列の背景色 ( IE と NS ) 　縁取りの色 ( IE と NS ) 　外側余白の色 　背景画像
[配置 ]　 　表を配置(他との位置関係) 　内容の配置 　内容の高さを揃える 　常に右端に表示
[その他] 　表の大きさ(縦幅・横幅) 　項目の大きさ(縦幅・横幅) 　表の題名 　見出し用の項目 　自動折返しの停止 　縁取りを利用 　白と緑について 　付加されるスペース
T⇔ 表の幅と高さ
表の大きさは、その内容によって決定されます。
内容よりも広い表にしたい場合は、幅と高さを指定できます。
( 指定した大きさよりも内容の方が大きいときは、表は内容に合わせて大きくなります。)

400×100 の 小麦色の表
<TABLE WIDTH=400 HEIGHT=100><TR><TD BGCOLOR=Wheat>
</TD></TR></TABLE>

幅を左右いっぱい ( 100％ ) にする場合。
<TABLE WIDTH=100% HEIGHT=50><TR><TD BGCOLOR=Wheat>
</TD></TR></TABLE>

表の中の表の例。
<TABLE WIDTH=400 HEIGHT=100><TR><TD BGCOLOR=Wheat>
<TABLE WIDTH=100% HEIGHT=50><TR><TD BGCOLOR=AQUA>
</TD></TR></TABLE>
</TD></TR></TABLE>


T⇔ 項目の幅と高さ
項目の幅は、同じ列にある最も幅が広いものに合わせられます。
( 同じ列の項目は、同じ幅になります。)
項目の高さは、同じ行にある最も高いものに合わせられます。
( 同じ行の項目は、同じ高さになります。)

 幅と高さは、他の項目の整数倍にすることができます。
項目の大きさを変えるには、COLSPAN と ROWSPAN を使います。
例を示します。
<TABLE BORDER>
<TR><TD COLSPAN="2">項目１</TD></TR>
<TR><TD ROWSPAN="4">項目２</TD></TR> <TR><TD>項目３</TD></TR>
                                      <TR><TD>項目４</TD></TR>
                                      <TR><TD>項目５</TD></TR>
</TABLE>
項目１
項目２
項目３
項目４
項目５
COLSPAN=2 は、項目の幅を、他の項目２つ分にします。
ROWSPAN=4 は、項目の高さを、他の項目３個分にします。
　　　(1+3=4)
COLSPANタグ と ROWSPANタグを使わないで項目１と項目２の表を作り、項目２の中に更に表を作っても、同じような表にすることができます。

この方法でなければ表示できない例
<TABLE BORDER=5 CELLSPACING=1><TR>
<TD ROWSPAN=2>A</TD>
<TD COLSPAN=2>B</TD>
</TR><TR>
<TD BGCOLOR=AQUA>CC</TD>
<TD ROWSPAN=2>D</TD>
</TR><TR>
<TD COLSPAN=2<E</TD>
</TR></TABLE>
　 (外側余白+縁取り幅)=5　縁取り幅=1
Ａの高さは、ＢとＣの ２個分。
Ｂの幅は、ＣとＤの ２個分。

AQUA=水色
Ｄの高さは、ＣとＥの ２個分。

Ｅの幅は、ＡとＣの ２個分。
　
逆巻き
<TABLE BORDER=5 CELLSPACING=1><TR>
<TD COLSPAN=2>A</TD>
<TD ROWSPAN=2>B</TD>
</TR><TR>
<TD ROWSPAN=2>C</TD>
<TD BGCOLOR=AQUA>DD</TD>
</TR><TR>
<TD COLSPAN=2>E</TD>
</TR></TABLE>
　 　
A B
CC D
E

　 逆巻き
A B
C DD
E


T⇔ 表の題名
表の題名または注釈を付けるには、補助タグ CAPTION を使います。
題名 ← LEFT 題名 ← TPO RIGHT → 題名
<TABLE>
<CAPTION ALIGN=TOP><FONT COLOR=GREEN>題名</FONT></CAPTION>
<TR>
<TD>表の内容</TD>
</TR>
</TABLE>
TOP : 表の上部中央に表示します。
LEFT : 表の上部左側に表示します。
RIGHT : 表の上部右側に表示します。
BOTTOM : 表の右下に表示します。
<CAPTION> を複数記述すると、全て表の上部に表示されます。(IExplore)
 		BOTTOM → 題名


T⇔ 見出し用の項目
<TH> は、<TD>とほぼ同じ働きですが、見出し用の項目として使われます。

中の文字は、太字で 左右の中央に表示されます。
見出し用項目が中央に表示されることを示すために、表の幅を 450 に広くしています。
<TABLE WIDTH=450 BORDER><TR>
<TH><FONT COLOR=Maroon>見出し項目</FONT></TH>
<TD>項目１</TD>
<TD>項目２</TD>
</TR></TABLE>
見出し項目項目１項目２
表示位置を指定しなければ、見出し用の項目は中央寄せで表示されます。


T⇔ 項目内を自動折返ししないようにするには
<TD>タグを、 <TD NOWRAP> のように書きます。
NOWRAP の指定をした表の中では、<WBR>による折返し禁止解除はできません。

NOWRAP で折返し禁止にした表の中で地図などを描くとき
表の外の場合と同様に、ＭＳ ゴシック などの固定幅フォントが有効です。


 T⇔ 応用：縁取りを利用する
内容が空の 表, 列, 行 を作ると、その分の縁取りだけが作られます。
<TABLE><TR><TD BGCOLOR="Broun"> 　縁取りに着色(茶)するためだけの表。
<TABLE>
<TR><TD BGCOLOR="Beige">項目１</TD>
<TD BGCOLOR="Beige">項目２</TD>
<TD></TD><TD></TD><TD></TD> 　　縁取りの幅を太くするためだけの空の項目。
<TD BGCOLOR="Beige">項目３</TD>
</TR></TABLE>
</TD></TR></TABLE>
項目１ 項目２ 項目３


T⇔ メモ : 白と緑について
IExplore で表の色を指定する場合に限り、GREN が使用できます。
( GREN は明るい緑です。旧 Iexplore2.0 では GREN のみ。)

　#00E000　　 　#008000　　
　GREN 　GREEN

　
Netscape3.0で背景色に FFFFFF を指定すると、----------
こんなん感じになっちゃいます。　
FFFFFE や WHITE では、全面白になります。　
(実際には、行の間隔は これほどは開きません。)


T⇔ 備考：スペースが付加される場合。
4.0 のブラウザでは、スペースは付加されません。(表示されません。)
内容の後に<BR>を書かないで改行すると、半角スペースが付加されます。
ただし、</TD>で終る場合は、半角スペースが付加されません。
<TABLE BGCOLOR="Brown"><TR>
<TD BGCOLOR="Beige">文章</TD></TR></TABLE> 　</TD>を書いて改行。

<TABLE BGCOLOR="Brown"><TR>
<TD BGCOLOR="Beige">文章 　　　内容の後に</TD>を書かずに改行。
</TD></TR>
</TABLE>
文章
文章
　← 半角スペースが付加されています。


T
　　mtoga@sannet.ne.jp 　 登録日 '96. 6.15
URL : http://www.page.sannet.ne.jp/mtoga/index.html