lHTML  目的別 ( その他 ) '96.12. 6
l.お知らせ 内容 LINK FILE   HTML Win PC Unix MS-DOS C C++ Mfc Java 
.全般_ .文字 _配置   _リンク .フレ-ム  CGI .タグ一覧.
登録_ .音・画. .スタイル .--. .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">項目1</TD></TR>
<TR><TD ROWSPAN="4">項目2</TD></TR> <TR><TD>項目3</TD></TR>
                                      <TR><TD>項目4</TD></TR>
                                      <TR><TD>項目5</TD></TR>
</TABLE>
項目1
項目2
項目3
項目4
項目5
COLSPAN=2 は、項目の幅を、他の項目2つ分にします。
ROWSPAN=4 は、項目の高さを、他の項目3個分にします。
   (1+3=4)
COLSPANタグ と ROWSPANタグを使わないで項目1と項目2の表を作り、項目2の中に更に表を作っても、同じような表にすることができます。

この方法でなければ表示できない例
<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
Aの高さは、BとCの 2個分。
Bの幅は、CとDの 2個分。

AQUA=水色
Dの高さは、CとEの 2個分。

Eの幅は、AとCの 2個分。
 
逆巻き
<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>項目1</TD>
<TD>項目2</TD>
</TR></TABLE>
見出し項目項目1項目2
表示位置を指定しなければ、見出し用の項目は中央寄せで表示されます。


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

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


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


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