| 日記 GT-ONE WEBSITE 【プチ講座】 |
| ファイル 編集 表示 お気に入り ヘルプ（ご質問掲示板） プチ講座 |
５月２７日以来お休みしていた【初心者のための日記でＴＡＢＬＥ講座！】を今日は引き続き書いてみますね！
前回は【初心者のための日記でＴＡＢＬＥ講座！８】属性の説明(４) で BACKGROUND（背景画像）を入れるところまで説明しました。
今日は ALIGN と VALIGN について書いてみます。
ALIGNとVALIGNについて！
ALIGN の属性をTABLEタグの中に入れますと、TABLE を左(left)、右(right)、中央(center)のいずれかに配置できます。
| 此処に文字！ | 此処に文字！ | | 此処がセル内です | 此処がセル内です |
←このテーブルは ALIGN="left"と指定しています。テーブルの幅は width="60%" と指定しています。左に寄っていますね！
テーブルに続けて、テキストを書きますとテーブルの右側にテキストが廻りこみます。
お判りでしょうか！
廻りこみを解除したい時は、テーブルのタグを終わらせる</TABLE>の後に<BR clear=all>を入れますと、テキストや画像は廻りこまないで、改行してテーブルの下に行きます。
では、テーブルを右寄り(ALIGN="right")にしてみましょう。
そうしますと、テキストが左に廻りこみますからそれを<BR clear=all> で解除してみます。
| 此処に文字！ | 此処に文字！ | | 此処がセル内です | 此処がセル内です |
ALIGN="right"と指定しました。
そして、</TABLE>の後に<BR clear=all>をいれて、テキストを書きますと、このようにテキストはテーブルの下に改行します。
お判りですか？・・・お願い判って・・・(-_-;)
また、ALIGN="center"と指定しますと、テーブルはセンターリングします。
センターリングさせた時は、テキスト、画像などは廻りこみません。
そのまま、改行してテーブルの下に行きます。
ALIGN="" を書き込まないで、配置を指定しなければ、テーブルは左寄りになります。
そして、テキストなども廻りこみしないで、改行してテーブルの下に行きます。
・・・判りますよね・・・(￣へ￣｜｜｜) ｳｰﾑ
では、テーブルを右寄りにした時のタグを書いて見ます。↑この上のテーブルですね！
<TABLE border="10" bordercolorlight="pink" bordercolordark="deeppink" align="right" bgcolor="tan" width="60%" height="" cellspacing="20" cellpadding="20"><TR><TD align="center" bgcolor="deeppink"><FONT SIZE="+1" color="white">此処に文字！</font></TD><TD align="center" bgcolor="deeppink"><FONT SIZE="+1" color="white">此処に文字！</font></TD></TR><TR><TD bgcolor="#CEFFCE">此処がセル内です</TD><TD bgcolor="#CEFFCE">此処がセル内です</TD></TR></TABLE>
このテーブルの後にこのようにテキストなどを書きますと、このテキストはテーブルの左に廻りこみます。
廻りこみを解除する時は、テーブルのタグをくくる</TD></TR></TABLE>の後に<BR clear=all>を続けて入れます。
その後からテキストを書きますと、廻りこみません。
|
|
ここまでは、お判りになりましたか？
では、ALIGN の属性をセル <td> の中に入れてみましょう。
↑上のタグの中には、すでに ALIGN="center" が入っています。
一行目の２個のセル<TD>の中です。見つかりましたか？
ALIGN を セル<TD> の中に入れますと、セル内のデーターが表示される位置を指定できます。
ここでは、ALIGN="center"と指定していますから、セル内のテキストや画像はすべてセンターリングします。
ALIGN の属性は横方向の指定になります。
ALIGN="center"は中央揃えに
ALIGN="left"は左揃えに
ALIGN="right"は右揃えに
縦方向は、VALIGN で指定します。
VALIGN="top"は一番上に
VALIGN="middle"は中央に
VALIGN="bottom"は一番下に
これらの属性をセルに入れたテーブルをを書いてみます。
| align="left" valign="top" | align="right" valign="bottom" | | align="center" valign="middle" | ALIGN VALIGN指定なし |
タグを書いておきますので、見比べて見て下さいませ！
<TABLE border="10" bordercolorlight="pink" bordercolordark="deeppink" align="center" bgcolor="tan" width="80%" height="" cellspacing="20" cellpadding="0"><TR><TD align="left" valign="top" bgcolor="deeppink" width="50%" height="100"><FONT color="white">左上に表示されます</font></TD><TD align="right" valign="bottom" bgcolor="deeppink"><FONT color="white">右下に表示されます</font></TD></TR><TR><TD align="center" valign="middle" bgcolor="#CEFFCE" width="50%" height="100">中央に表示されます</TD><TD bgcolor="#CEFFCE">指定しなければ左揃えの中央になります</TD></TR></TABLE>
|
|
お判りでしょうか！
では！みなさんがんばって下さいませ！(￣へ￣｜｜｜) ｳｰﾑ
ε＝ε＝ε＝（┌￣）┘ダッシュ！
Copyright (C) GT-ONE WEBSITE 2002-2004 All Rights Reserved
|
お気に入りの記事を「いいね！」で応援しよう
|
Re:【初心者のための日記でＴＡＢＬＥ講座！9】属性の説明(5)(06/27)
|
レンゲ・ローズ さん |
こんにちは。(^ｰ^*
お陰さまで日々ｲﾒｰｼﾞ通りになってご機嫌なんですー。有り難うございました。
画像を左寄せにして廻りこむことが出来ないﾚﾝｹﾞにこんな難関が出来るかどうか？？ですが、(__ *;;
やってみますねー。
(2004/06/27 04:20:25 PM)
|
Re:【初心者のための日記でＴＡＢＬＥ講座！9】属性の説明(5)(06/27)
|
meiakira さん |
こんばんわぁ～（*＾＿＾*）
今日は大雨が降ったかと思えば急に青空～
こちらは変なお天気でしたぁ～(~_~;)
「BR clear=all」でいいんですか？
右も左も関係なくって楽ですね。
タグ頂いて帰りますぅ～m(__)m
では、おやすみなさ～～い（'▽'*）ﾆﾊﾟｯ
(2004/06/27 11:56:26 PM)
|
Re:【初心者のための日記でＴＡＢＬＥ講座！9】属性の説明(5)(06/27)
|
みみずくママ さん |
('-'*)オハヨ♪
今週もヨロシク:＼(*^▽^*)/ ね
ご無沙汰していました(笑)あちらのほうのＨＰ、
ちょっち、おかしいかな？あれでいいのでしょうかね？？あれ。アド教えてたっけ？＿
(2004/06/28 04:59:04 AM)
|
Re:【初心者のための日記でＴＡＢＬＥ講座！9】属性の説明(5)(06/27)
|
ネモッチ☆彡 さん |
ハリー・ポッターとアズカバンの囚人見てたのしかった。映画ｈｐ更新のため、週２日訪問できないので、ご迷惑かけます。
共有ホットラインで、同じ話題などを設置します。ニック名前と、HPアド別間のせっていいでしょうか？
鍵つきなので、楽天友達しかわからないようにします。ご協力お願いします。
(2004/06/28 04:25:18 PM)
|
Re:【初心者のための日記でＴＡＢＬＥ講座！9】属性の説明(5)(06/27)
|
muon917 さん |
こんばんわぁ！！
w(￣▽￣;)wワオッ!!
私の大好きなテーブルだ！！(_ _;)... ウゥ
先日、テーブルを使ってキャラをＵＰしましたが、
文字を入れるのに何だかバラバラになってしまい。。(T.T)
これ、知りたかったんですよ～～。
っと、いっても頭がさえている時に勉強させてもらいますね。
ＧＴさん、テーブルの中のフォントを替えるのはどうしたらいいの？
もしよかったら教えてください！！
(2004/06/29 08:39:07 PM)
