lHTML　表 目的別用例 (1) '96.12. 6
l.お知らせ　内容　LINK　FILE 　 HTML　Win　PC　Unix　MS-DOS　C　C++　Mfc　Java　
.全般_ .文字 _配置 　表 _リンク .フレ-ム 　ＣＧＩ .タグ一覧.
登録_ .音・画. .スタイル .マ-キ-. .ActiveX. 　---　 .色の名前. _色一覧
　 使用できるタグ 　 基本的用例 　 目的別 　２ 　３ 　 IExplore専用 　
[背景] 　項目の背景色 　全体・列の背景色 ( IE と NS ) 　縁取りの色 ( IE と NS ) 　外側余白の色 　背景画像
[配置] 　表を配置(他との位置関係) 　内容の配置 　内容の高さを揃える 　常に右端に表示
[その他]　 表の大きさ(縦幅・横幅) 　項目の大きさ(縦幅・横幅) 　表の題名 　見出し用の項目 　自動折返しの停止 　縁取りを利用 　白と緑について
　BG=Big-BK_K.gif　img=Big-MAP.gif, Big-BK_S.jpg, Big-B054.jpg
T⇔ 項目の背景色
<TABLE>
<TR>
<TD BGCOLOR="#FFFF00">黄色の項目<BR></TD>
</TR>
</TABLE>
　
黄色の項目


T⇔ 全体・列の背景色
表全体の色は、<TABLE>タグでまとめて指定できます。
同じ列の 項目の背景色は、<TR>タグでまとめて指定できます。

<TABLE BGCOLOR="WHITE">
<TR><TD>A</TD><TD>B</TD><TD>C</TD></TR>
<TR BGCOLOR="GREEN"><TD>D</TD><TD>E</TD><TD>F</TD></TR>
<TR><TD>G</TD><TD>H</TD><TD>I</TD></TR>
</TABLE>
上例をそのまま表示IExplore　Netscape
ABC
DEF
GHI
ABC
DEF
GHI
ABC
DEF
GHI
( この表示例は、表を２重にして表示しています。)
このように、IExplore と Netscape では、表示のされ方が異なります。


T⇔ IExplore と Netscape で背景色の配置を同じにするには
表全体の色を設定するときは、別な表を作って囲みます。
内側の表全体の色は、外側の表で指定します。
<TABLE><TR><TD BGCOLOR="WHITE">
<TABLE>
<TR><TD>A</TD><TD>B</TD><TD>C</TD></TR>
<TR BGCOLOR="GREEN"><TD>D</TD><TD>E</TD><TD>F</TD></TR>
<TR><TD>G</TD><TD>H</TD><TD>I</TD></TR>
</TABLE>
</TD></TR></TABLE>
ABC
DEF
GHI


T⇔ 縁取りの色
表の縁取りの色は、背景色になります。( 縁取り幅=5 の場合。)
<TABLE BGCOLOR="WHITE" CELLSPACING="5" BORDER>
<TR BGCOLOR="#60E060">
<TD>項目</TD>
<TD BGCOLOR="#D0D0FF">２</TD>
</TR></TABLE>
IExplore
項目２
　 Netscape
項目２
　　　 列の色＝緑色 ( 60E060 )
項目２の色＝紫色 ( D0D0FF )

T⇔ IExplore と Netscape で縁取りの色を同じにするには
外側に別な表を設けて設定します。
<TABLE><TR><TD BGCOLOR="WHITE">
<TABLE CELLSPACING="5" BORDER>
<TR BGCOLOR="#60E060">
<TD>項目</TD>
<TD BGCOLOR="#D0D0FF">２</TD>
</TR></TABLE>
</TD></TR></TABLE>
 外側の色＝白
縁取り幅＝５
列の色＝緑色

項目２の色＝紫色
　
　
項目 ２
(外側の TD BGCOLOR で、まず色を決めてしまいます。)


T⇔ その他、IExplore と Netscape での表示の違いの例
Netscape の縁取りの色は、( 表の外側の )背景色になります。

<TABLE BGCOLOR="WHITE"><TR>
<TD BGCOLOR="AQUA">項目</TD>
</TR></TABLE>
そのまま
項目
　
IExplore
項目
　
Netscape3.0
項目
　
 右のふたつは、二重の表を使って擬似的に表示しています。

<TABLE BGCOLOR="GOLD"><TR>
<TD>項目</TD>
<TD BGCOLOR="LightGreen">２</TD>
</TR></TABLE>
そのまま
項目２
　IExplore
項目２
　Netscape
項目２


T⇔ 表の外側余白の色
表の外側の色は、その外側の表で設定します。
<TABLE CELLPADDING="10"><TR><TD BGCOLOR="#FFFF00" >
<TABLE BGCOLOR="#60E060" BORDER="5" CELLSPACING="5">
<TR><TD>項目</TD></TR></TABLE>
</TD></TR></TABLE>
 黄色
緑色
IExplore
項目
　 Netscape
項目
　 立体表示部の色
IExplore　:　指定しなければ白黒。指定可。
Netscape　:　ページの背景色 の明暗。


T⇔ 背景画像 (IExplore, Netscape4.0 )

※ Netscape4.03 で表を２重にし、外側の表に背景画像を使用すると、
内側の表では 背景色が正しい位置に表示されないようです。
その場合は、内側の表にも背景画像を使用すると解決されます。

表全体の背景画像 ( 不透明画像 )
<TABLE BACKGROUND="../gazou/Big-B051.jpg">
<TR><TD>
<FONT COLOR=YELLOW>背景付<BR>の表<BR></FONT>
</TD></TR></TABLE>
　→　
背景付
の表
　 元の画像

画像の大きさは、表の内容の大きさに合わせられます。
表よりも小さい画像は、表の大きさに応じて複数回使用されます。

表全体の背景画像 ( 透明画像 )
<TABLE BACKGROUND="../gazou/Big-BT_M.gif">
<TR><TD NOWRAP>
背景付の<BR>表<BR>
</TD></TR></TABLE>
　→　
背景付の
表
　 元の画像


全体と項目に、別な背景画像を使用
<TABLE BACKGROUND="../gazou/Big-BK_S.jpg">
<TR>
<TD>背景付の表<BR></TD>
</TR><TR>
<TD BACKGROUND="../gazou/Big-B054.jpg">
<FONT COLOR=Maroon>背景付の<BR>項目<BR></FONT>
</TD></TR></TABLE>
　→　
背景付の表
背景付の
項目

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