lHTML　表 目的別用例 (2) '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-BT_G.gif
T⇔ 表の配置
補助タグ ALIGN で、ページ内の 左側, 中央, 右側 に配置できます。

左右に配置する場合
表の前に <BR>(または <P> ) が書かれていないときは、
表の前後の <BR> の間の、表以外の内容は、表の前に移動します。
次の二つは同じ表示になります。
表示例<BR>
AA
<TABLE ALIGN=left><TR><TD>表左</TD></TR></TABLE>
BB<BR>
表示例<BR>
AABB<BR>
<TABLE ALIGN=left><TR><TD>表左</TD></TR></TABLE>
　
表示例
AA
表左
BB


　
表が複数ある場合でも、途中の内容は全て、表の前に送られます。
表の前に <BR> を書いておけば、このような事は考える必要がありません。

配置した表の分の 表示面積が減らされます。
表の後に書かれている内容は、表を表示した残りの面積に表示されます。
<TABLE ALIGN=left><TR><TD>表<BR>左</TD></TR></TABLE>　　　
　
表
左



　
ここから次の内容が表示されます。<BR>
←上記による表示例です。<BR>
 次の表示位置を 左表の下端に揃えるには、<BR CLEAR=left> と書きます。<BR><BR>
　
表
右


　
※ ここに右表を記述すると、右側に表示されます。→<BR>
次の内容は、ここ(※ の位置)から表示されます。<BR CLEAR=left>
<BR CLEAR=left>の次はここから表示されます。 <BR CLEAR=all>
もし、次の表示位置を 右表の下端に揃えるには、<BR CLEAR=right> と書きます。
どちらでも、低い方の下端に揃えるには、<BR CLEAR=all> と書きます。

左右の中央に配置する場合
表の高さ(縦幅) 分の面積を占領します。
ここには表示できません。
もし表示する場合は、先に左表示しておきます。
ここには表示できません。
もし表示する場合は、先に右表示しておきます。
　
表
中

　
次の内容はここから表示されます。


配置指定を組み合わせた例
１．右側に表(1) を右配置します。
２．残った左側に、表(2) を左配置します。
３．残った中央に、表(3) を右配置します。
３．　まだ残っている中央部分に、文字と画像を配置します。
　　　　文字と画像は、中央配置の指定をします。
　　　　画像はさらに、右配置の指定をします。
５．まだ残っている中央部分に、表(4) を配置します。
表
右
(1)
表(1)の次
　
表
左
(2)

表(2)の次
　
表
右
(3)


表(3)の次( ここが空いている。)
DIV による中央表示(←文字と画像→)
表中(4)
中表(4)の次
左表下端
右表(3)の下端 
 <TABLE ALIGN=right><TR><TD BGCOLOR="#F0F0D0" ALIGN=center>表<BR>右<BR>(1)</TD></TR></TABLE>
    表(1)の次<BR>
 <TABLE ALIGN=left><TR><TD BGCOLOR="#F0F0D0">　<BR>表<BR>左<BR>(2)<BR><BR></TD></TR></TABLE>
    表(2)の次<BR>
 <TABLE ALIGN=right><TR><TD BGCOLOR="#F0F0D0">　<BR>表<BR>右<BR>(3)<BR><BR><BR></TD></TR></TABLE>
    表(3)の次<BR>
 <DIV ALIGN=center>
    <IMG SRC="../gazou/Big-BT_G.gif" ALIGN=right BORDER=0>
    DIV による中央表示(←文字と画像→)</DIV>
 <TABLE ALIGN=center><TR><TD BGCOLOR="#F0F0D0">表中(4)</TD></TR></TABLE>
    中表(4)の次<BR CLEAR=left>左表下端
 <BR CLEAR=right>右表(3)の下端
 <BR CLEAR=all>


T⇔ 項目内容の表示位置を指定する
各項目の表示位置は、枠内の上下左右に指定できます。
<TABLE WIDTH="300" HEIGHT="60" BORDER><TR>
<TD WIDTH=20%> A</TD>
<TD WIDTH=20% ALIGN=LEFT   VALIGN=TOP     > B</TD>
<TD WIDTH=20% ALIGN=CENTER VALIGN=MIDDLE  > C</TD>
<TD WIDTH=20% ALIGN=RIGHT  VALIGN=BOTTOM  > D</TD>
<TD WIDTH=20% ALIGN=RIGHT  VALIGN=BASELINE> E</TD>
</TR></TABLE>

A B C D E

ALIGN と VALIGN は、<TD><TH><TR>と共に使用できます。
<TD>または<TH>に、ALIGN と VALIGN の指定がないときは、 <TR>での設定が有効になります。
(IExploreでは　TD WIDTH を指定しなくても、等間隔に分けられます。)

T⇔ 内容の表示高さを揃える( 上記の応用 )

項目の内容は、特に指定しなければ上下の中央に配置されます。
中央 中央 中央 中央 中央中央

<TR VALIGN=bottom> によって、下辺に揃えることができます。
中央 中央 中央 中央 中央中央
　<TD VALIGN=bottom> によって 個々に配置しても同じです。

高さを揃えた方が良い(と思われる) 例
　 画像ａ　 　 画像ｂ　 　 画像ｃ　


T⇔ 応用：常に画面の右端に表示する。
表の枠を表示していますが、BORDER を指定しなければ表はわからなくなります。
●の部分には、文字 画像 表などを書くことができます。 
           幅            高さ
<TABLE WIDTH="100%" HEIGHT="40" BORDER>
    横方向位置    縦方向位置
<TD ALIGN=LEFT VALIGN=BASELINE><FONT COLOR="#00FF00" SIZE=5>●</FONT>
<TD ALIGN=CENTER VALIGN=MIDDLE><FONT COLOR="#FFFFFF" SIZE=1>●</FONT>
<TD ALIGN=RIGHT VALIGN=BOTTOM><FONT COLOR="#0000FF" SIZE=5>●</FONT>
</TABLE>
● ● ●
● ● ●


T

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