lHTML  目的別用例 (2) '96.12. 6
l.お知らせ 内容 LINK FILE   HTML Win PC Unix MS-DOS C C++ Mfc Java 
.全般_ .文字 _配置   _リンク .フレ-ム  CGI .タグ一覧.
登録_ .音・画. .スタイル .--. .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.右側に表(1) を右配置します。
2.残った左側に、表(2) を左配置します。
3.残った中央に、表(3) を右配置します。
3. まだ残っている中央部分に、文字と画像を配置します。
    文字と画像は、中央配置の指定をします。
    画像はさらに、右配置の指定をします。
5.まだ残っている中央部分に、表(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> によって 個々に配置しても同じです。

高さを揃えた方が良い(と思われる) 例
  画像a    画像b    画像c 


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