テーブルの中の文字の位置を指定

①上下左右の指定

テーブルの中の文字を右揃え、中央揃え、右揃えにする場合、普通のタグを使っても出来ます。

<DIV ALIGN="left">左揃えの場合</DIV>
　<P ALIGN="left">改行＆左揃えの場合</P>
<DIV ALIGN="center">中央揃えの場合</DIV>
　<P ALIGN="center">改行＆中央揃えの場合</P>
<DIV ALIGN="right">右揃えの場合</DIV>
　<P ALIGN="right">改行＆右揃えの場合</P>

こういう普通のタグを打ち込んでも良いんだけど、せっかくの『テーブル作成法』なんだから、テーブルタグを使ってテキストの位置を指定したいと思います。

左右の文字の位置を変える場合→	ALIGN="left"　左揃え
	ALIGN="center"　中央揃え
	ALIGN="right"　右揃え

上下の文字の位置を変える場合→	VALIGN="top"　上揃え
	VALIGN="middle"　中央揃え
	VALIGN="bottom"　下揃え

ALIGN="center"とVALIGN="middle"は同じ中央揃えだけど意味が違います。
左右の中央揃えと、上下の中央揃え。詳しくは下の表を見比べてNё

このタグを何処に貼り付けるかと言うと・・・

一行（一列）に何処揃えにするか指定する場合→　<TR ALIGN="center">

１マスだけ何処揃えにするか指定する場合→　<TD ALIGN="center">

このように、<TR>や<TD>に付けて使います。

<TABLE>の所にこのタグをつければ、テーブル全体の位置をそのページの何処に置くか？という指定になります。
または回り込みの指定にもなります。
回り込みについては、ココ参照

何処揃えか分かり易くするために、テーブルの大きさも変えちゃいました！！

<TABLE BORDER HEIGHT="100" WIDTH="150">
<TR ALIGN="right">
<TD>１</TD>
<TD>２</TD>
<TD>３</TD>
</TR>
<TR ALIGN="center">
<TD>４</TD>
<TD>５</TD>
<TD>６</TD>
</TR>
</TABLE>

上の段の一列を右揃えに
下の段の一列を中央揃えにしました。
左のように書いたのを表示させるとこうなります。

１	２	３
４	５	６

<TABLE BORDER HEIGHT="200" WIDTH="300">
<TR>
<TD ALIGN="left">左揃え</TD>
<TD ALIGN="center">中央揃え</TD>
<TD ALIGN="right">右揃え</TD>
</TR>
<TR>
<TD VALIGN="top">上揃え</TD>
<TD VALIGN="middle">中央揃え</TD>
<TD VALIGN="bottom">下揃え</TD>
</TR>
</TABLE>

１マスずつ指定しました。
左のように書いたのを表示させるとこうなります。

左揃え	中央揃え	右揃え
上揃え	中央揃え	下揃え

②セルとテキストの間隔の指定

今度は、もっと微妙に枠の中の文字の位置を決めてみましょう。
CELLPADDING="数字"を使うと、細かい指定が出来ます。
このタグは、枠と中身（テーブルの枠とテーブル内のテキスト）との間隔を指定するタグです。

例えばですねぇ。こういうテーブルの中に、文字を入れたりする時に、細かい字がいっぱい書いてあったらゴチャゴチャするでしょ？
（CELLPADDING指定ナシ）

テーブルと文字の隙間を空けた方が、ちょびっとｽｯｷﾘするでしょ？そんな時に使うタグです
（CELLPADDING="10"）

CELLPADDINGは<TABLE>部分につけます。

<TABLE BORDER CELLPADDING="5">
<TR>
<TD>１</TD>
<TD>２</TD>
<TD>３</TD>
</TR>
<TR>
<TD>４</TD>
<TD>５</TD>
<TD>６</TD>
</TR>
</TABLE>

枠と文字の間隔を５に指定しました。
左のように書いたのを表示させるとこうなります。

１	２	３
４	５	６

<TABLE BORDER CELLPADDING="20">
<TR>
<TD>１</TD>
<TD>２</TD>
<TD>３</TD>
</TR>
<TR>
<TD>４</TD>
<TD>５</TD>
<TD>６</TD>
</TR>
</TABLE>

枠と文字の間隔を２０に指定しました。
左のように書いたのを表示させるとこうなります。

１	２	３
４	５	６

<TABLE BORDER WIDTH="300"CELLPADDING="10">
<TR>
<TD>１</TD>
<TD>２</TD>
<TD>３</TD>
</TR>
</TABLE>

分かりやすくするために
テーブルの大きさも変えてみました。
（テーブルの横幅を３００ピクセル）
枠と文字の間隔を１０に指定しました。
左のように書いたのを表示させるとこうなります。

１

２

３

<TABLE BORDER WIDTH="300"CELLPADDING="20">
<TR>
<TD>１</TD>
<TD>２</TD>
<TD>３</TD>
</TR>
</TABLE>

これも分かりやすくするために
テーブルの大きさも変えてみました。
（テーブルの横幅を３００ピクセル）
枠と文字の間隔を２０に指定しました。
左のように書いたのを表示させるとこうなります。

１

２

３

テーブル作成の目次に戻る　　　 TOP