モックン☆彡の部屋

前回は テーブル タグで表を作れるようになりましたので、

今回は作った表を

形よく整える

事を説明します。

まずは、表を作ると言っても様々な大きさがあり、前回の作成方法だと

表の長さ（横）は文字の長さに比例し、高さ（縦）は行の数に比例します。

この横と縦の長さを指定するにはそれぞれ『 width="" 』と『 height="" 』を使います。

単位は毎度おなじみの『 ピクセル 』で、その他に『 ％ 』があります。

『 ％ 』はウィンドウに対する比率を表し、

最高で１００％です。（１００％以上もできますが、悪までも比率です）

ここで注意が必要なのは、『 width="10" 』と書いても

そこに記入する文字の長さが width="10" と指定した値よりも大きいと、

大きい方が優先されます。

基本的に テーブル タグのどこの部分でも指定できるのですが、

『 width="" 』と『 height="" 』それぞれの合計値が始めに宣言した値と異なる場合は、

大きい方が優先されます。 《例題１》 を見れば分かると思います。

入力した単位（ ピクセル ）がどのくらいの長さかは こちら を参考にして下さい。

実際に『 width="" 』や『 height="" 』は下記のように使います。


《例題１》

上のように書くと、『 height="" 』の合計が < TABLE > タグに書かれている

合計より多くなるので、実際の縦（たて）の大きさは

50＋100＋100＝250 になります。その結果が下のようになります。


ここで初めて登場した < CAPTION ></ CAPTION > ですが、

これは表の

タイトル

を表します。記入する場所は 《例題１》 に書いてあるように、

< TABLE > の直後に書きます。


〔ワンポイント!〕
『 width="" 』に値を指定して書いても、文字の長さによって、

勝手に文字が改行されてしまう場合があります。

例えば、下は width="120" を指定して書いています。


ここでブラウザの『表示』で文字サイズを『大』や『最大』にしてみて下さい。

すると、文章が改行されてませんか？

この様な状態を回避し、改行しないように表示するのには『 nowrap 』を使います。

使い方は、 < TD nowrap > や < TH nowrap > のように使います。

また、本来テキストなどに使うのですが『 < NOBR > 本日は晴天なり </ NOBR > 』

と書いても改行されないで表示できます。

ちなみに、『 NOBR 』は『 no line br eak 』の略語です。

この他にも、実際の数値より少なかったら･･･などありますが、

自分で数値をいじって試してみてください。


ここまで、 TABLE の大きさや並べ方を書きましたが、

並べられている文字をよく見ると、文字が 左 によってませんか？

では、この文字位置の決め方を説明しましょう。

文字の横配置は『 align="" 』というもので決めます。

『 "" 』の中にはそれぞれ『 left 』、『 center 』、『 right 』が入り、

『 left 』は 左 、『 center 』は 中央 、『 right 』は 右 に文字を配置します。

何も書かない場合は 左 寄りになります。

< TABLE align ="center" > と書くと

全体

が ページの 中央 に、

< TR align ="center" > と書くと書いた

１行

の文字が 中央 に、

< TD align ="center" > と書くと枠（わく）

１つ

の文字が 中央 になります。

上の『 align="" 』は横の配置をきめるものですが、

縦（たて）の配置を決めるには『 valign="" 』を使います。

『 "" 』の中にはそれぞれ『 top 』、『 middle 』、『 bottom 』が入り、

『 top 』は 上 、『 middle 』は 中央 、『 bottom 』は 下 に文字を配置します。

何も書かない場合は 中央 になります。

では、具体的な例は下をみてください。


《例題２》

上ように書くと、下のように表示されます。（色はつきません）

	align ="left"	align ="center"	align ="right"
valign ="top"	位置Ａ	位置Ｂ	位置Ｃ
valign ="middle"	位置Ｄ	位置Ｅ	位置Ｆ
valign ="bottom"	位置Ｇ	位置Ｈ	位置Ｉ

前にも書きましたが、『 align="" 』や『 valign="" 』を書かないと

位置Ｄ

になります。

また、 《例題１》 で書いた < CAPTION > タグも

< CAPTION align="right" > などと指定する事ができます。


タグをコピーして使う場合は、全角のスペースは半角にするか、削除して下さい

テーブルで整頓１（高）へ

テーブルで整頓３（高）へ