５

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

hyoujun.gif (3488 バイト)

６．

 セルの中のテキストの位置を指定しよう！
NE3 NE4 NE6 IE3 IE4 IE5 IE6 i

今までは、表を書くと文字がセルの左のほうに詰められていたね。
ここでやるタグではセルの中の文字の位置を自由に設定できるんだ。

<TD ALIGN="■" VALIGN"▲">〜</TD> 　    ・・・・セル中のテキストの位置を指定する

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

何度もやっているからだいたいわかってきたと思うけど、
まず<TD>というのはセルを書くことを表わしているね。
つまりここではALIGNとVALIGNで文字の位置を指定しているんだね。
ALIGNは文字を置く横の位置、VALIGNは文字を置く縦の位置だね。
ここでも<TD>を<TH>（太字）に変えれば<TH>（太字）内で文字の位置を指定できるからね。
今回のタグは<TR>も使えるんだ。
<TR>というのは何だった？そうだね、行を作るタグだったね。
一行全ての文字をセルの真ん中にするのに、セルごとに位置を指定していたらめんどくさいね。
そんなときは<TR>を使ってやると行全ての文字を一気に指定できるんだ。
・<TH ALIGN="■" VALIGN"▲">〜</TH>
・<TR ALIGN="■" VALIGN"▲">〜</TR>）

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

<TABLE BORDER WIDTH="50%" HEIGHT="50%">
<TR><TD>指定無し</TD><TD>指定無し</TD><TD>指定無し</TD></TR>
 ↑何も指定しないとき
<TR><TD ALIGN="left">左</TD><TD ALIGN="center">中央</TD><TD ALIGN="right" VALIGN="bottom">右下</TD></TR>
↑セルごとに指定・・・左、中央、右下
 <TR ALIGN="left" VALIGN="bottom"><TD>左下</TD><TD>左下</TD><TD>左下</TD></TR>
↑行で指定・・・全て左下
 </TABLE>

</BODY>
</HTML>

このように自分で縦と横の位置で指定してやろう。

　RESULT 　

指定無し指定無し指定無し
左中央あ
左下左下左下

　

back.gif (1116 バイト)　セルを結合して幅を指定したい！
next.gif (705 バイト)　表の背景に画像を使おう！