５

 表でもう少し凝ったレイアウトをしてみよう！

hyoujun.gif (3488 バイト)

３．

 表に題名をつけよう！
NE3 NE4 NE6 IE3 IE4 IE5 IE6 i

今度はさっきと違って、表の外に１つの題名をつけたい時に使うタグだよ｡
まずは一番の基本形、表の真上に題名を書きたいときは次のタグの間に書きたい文字を書こう。

<CAPTION>〜</CAPTION> 　    ・・・・表に題名をつける

つぎに、題名の位置をもう少し変えたいという人は次のタグを使ってね。

<CAPTION ALIGN="■" VALIGN="▲">〜</CAPTION> 　    ・・・・表に題名をつける

■・・・left（左） , center（中央） , right（右）
▲・・・top（上） , bottom（下）

これを使えば好きなところに文字を書くことができるんだ。
書くときは位置に注意しようね。

　SOURCE
<HTML>
<HEAD>
<TITLE>テーブル</TITLE>
</HEAD>
<BODY>

<TABLE BORDER>
<CAPTION>食べ物</CAPTION>               　　　　　　　←<CAPTION>〜</CAPTION>は題名。ここに書くんだよ。
<TR><TD>果物</TD><TD>野菜</TD></TR>
<TR><TD>りんご</TD><TD>キャベツ</TD></TR>
<TR><TD>みかん</TD><TD>レタス</TD></TR>
</TABLE>

<TABLE BORDER>
<CAPTION ALIGN="left" VALIGN="bottom">食べ物</CAPTION>　　←left（左）でbottom（下）に題名を置くことにした。ここに書くんだよ。
<TR><TD>果物</TD><TD>野菜</TD></TR>
<TR><TD>りんご</TD><TD>キャベツ</TD></TR>
<TR><TD>みかん</TD><TD>レタス</TD></TR>
</TABLE>

</BODY>
</HTML>

　

　RESULT 　

↓上に題名が出てくるね
食べ物
果物野菜
りんごキャベツ
みかんレタス

食べ物
果物野菜
りんごキャベツ
みかんレタス

↑左下に題名が出てきたね

位置に注意してね。
表示してみると、題名は表の外に出てくるからＨＴＭＬ文で書くときも<TABLE>〜</TABLE>の外に書いてしまいそうになるんだけど（実際僕も初め、わからずにそうしてた・・・・）、<TABLE>〜</TABLE>の中に書くからね。そこを少し注意しよう。

back.gif (1116 バイト)　表に見出しをつけよう！
next.gif (705 バイト)　セルを結合して幅を指定したい！