1021857

HOME | DIARY | PROFILE

【フォローする】【ログイン】

ＧＴ－ＯＮＥ　楽天タグ講座　パイプ奮闘記

Freepage List

レストアの仕方

< 新しい記事

新着記事一覧(全446件)

過去の記事 >

2004/05/11

【初心者のための日記でＴＡＢＬＥ講座！6】属性の説明(2)

(2)

カテゴリ：カテゴリ未分類

　日記　GT-ONE　WEBSITE　【プチ講座】

　ファイル　編集　表示　お気に入り　ヘルプ（ご質問掲示板）プチ講座チャットＢＢＳ

前回は

【初心者のための日記でＴＡＢＬＥ講座！５】属性の説明！

で

bordercolorlight　 bordercolordark

までについて話しました。

ではそのTABLEを書いて見ます。　

此処に文字！
<TABLE border="10" bordercolorlight="pink" bordercolordark="deeppink" align="center" bgcolor="" width="80%" height="" cellspacing="0" cellpadding="5"><TR><TD align="center" bgcolor="deeppink"> <FONT SIZE="+1" color="white">此処に文字！</font></TD><TR><TD bgcolor="#CEFFCE">此処が二列目のセル内です！ </TD></TR></TABLE>

blue

で書いたタグが以前説明したものですね！

では、このTABLEを基にして、今回も説明していきましょう。

cellspacingとcellpaddingについて！

cellspacing

はセルとセルとの間隔を、指定します。数値が大きくなるほど、間隔が開きます。

"0"でセル間が密着します。

cellspacingを直訳しますと、"セル間隔"という意味ですね！(￣m￣*)V

cellspacing="10"

としてみましょう。

此処に文字！
<TABLE border="10" bordercolorlight="pink" bordercolordark="deeppink" align="center" bgcolor="" width="80%" height="" cellspacing="10" cellpadding="5"><TR><TD align="center" bgcolor="deeppink"><FONT SIZE="+1" color="white">此処に文字！</font></TD></TR><TR><TD bgcolor="#CEFFCE">此処が二列目のセル内です！ </TD></TR></TABLE>

どうでしょう！上のセルと下のセルの間隔があきました。

TABLE全体のセルに対する間隔もあきましたね！

もっと判りやすいように、二列二行にして見ますね！

数値も

１０→２０

にして見ます。

此処に文字！	此処に文字！
<TABLE border="10" bordercolorlight="pink" bordercolordark="deeppink" align="center" bgcolor="" width="80%" height="" cellspacing="20" cellpadding="5"><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>	此処がセル内です。

此処に文字！

<TABLE border="10" bordercolorlight="pink" bordercolordark="deeppink" align="center" bgcolor="" width="80%" height="" cellspacing="20" cellpadding="5"><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>

此処がセル内です。

お判りでしょうか！

二行目の左のセルにタグを書き込んでいますから、そのセルが広がっています。

次に、

cellpadding

ですが、直訳しますと"セルの詰め物"という意味になります。

セルの中に入れた文字や画像とセルの枠からの余白を指定します。

数値が大きくなるほど余白が広くなります。

上のTABLEでは、

cellpadding="5"

と指定しています。

数値をもっと大きくしますと判りやすいと思います。

５→20

にして見ましょう。

此処に文字！此処がセル内です此処がセル内です此処がセル内です
此処に文字！
此処に文字！

此処に文字！此処がセル

<TABLE border="10" bordercolorlight="pink" bordercolordark="deeppink" align="center" bgcolor="" width="80%" 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>

此処がセル内です。此処がセル内です。此処がセル内です。此処がセル内です此処がセル内です

判りやすいように、セルの中のテキストをＴＡＢＬＥの中に入れて見ました。

セルの枠との余白が２０ピクセルになりました。お判りでしょうか！　

今日は少し時間がありましたので、仕事場から【プチ講座】を作って見ました。(￣m￣*)V

属性の説明はまだまだ続きます！

みなさんがんばって下さいませ！

では！ε＝ε＝ε＝（┌￣）┘ダッシュ！

お気に入りの記事を「いいね！」で応援しよう