GT-ONE 楽天タグ講座 パイプ奮闘記

Freepage List

【写真集】


■ 玄関 ■ 


■プチ講座MENU


【日記の雛形・罫線】


【もう一つのプロフィール】


■【おもしろタグ教室MENU】


バナーって何!


プレート教室VOL.1


プレート教室VOL.2


アニメGIF製作VOL.3


画像


アップロードとは  


アイコンの使い方!


壁紙の使い方!


【バナー&プレート置き場】


.    


.      


.    


  


.


【壁紙チェンジャー】


【リンク集】


   


.   


     


.         


【キリ番】


   


  


   


  


  


  


  


  


  


 


  


  


  


マーキー


グラデーションフォント 


色々なスクロール1


色々なスクロール2


色んなスクロール3


  


   


【カラーサンプル】カラーコード表


【カラーサンプル】カラーネーム表


(*mm)   


!  


スクロールを消す


  


  


TABLEでページ一覧を隠す


.


φ(..)


.


スイッチで表示


【日記リンクの皆様】 


( ̄‥ ̄)=3 フン


      


 


           


■【HPの飾り付け教室MENU】


   


TABLEで整理整頓  


アニメGIFって何!


      


画像を貼り付けてみよう


リンクを貼って見よう


楽天での壁紙について


壁紙の位置指定


 


【飾付VOL10】


test


雛形1


Rum Rose


remon


【My PIPE Collection】


【マイ パイプ コレクション001~010】


【マイ パイプ コレクション011~020】


【マイ パイプ コレクション021~030】


【マイパイプ コレクション #31~#40】


レストアの仕方


2004/05/11

 
XML
カテゴリ:カテゴリ未分類
 日記 GT-ONE WEBSITE 【プチ講座】
 ファイル 編集 表示 お気に入り  ヘルプ(ご質問掲示板  プチ講座 チャット BBS

    今回も引き続いて、TABLEの属性をやっていきましょう。
    前回は 【初心者のための日記でTABLE講座!5】属性の説明!
    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全体のセルに対する間隔もあきましたね!
    もっと判りやすいように、二列二行にして見ますね!
    数値も 10→20 にして見ます。
     
    此処に文字!此処に文字!
    <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" と指定しています。
    数値をもっと大きくしますと判りやすいと思います。 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>
    此処がセル内です。此処がセル内です。此処がセル内です。此処がセル内です此処がセル内です

     
    判りやすいように、セルの中のテキストをTABLEの中に入れて見ました。
    セルの枠との余白が20ピクセルになりました。お判りでしょうか! 
     
    今日は少し時間がありましたので、仕事場から【プチ講座】を作って見ました。( ̄m ̄*)V
    属性の説明はまだまだ続きます!
    みなさんがんばって下さいませ!
    では!ε=ε=ε=(┌ ̄)┘ダッシュ!







Last updated  2004/05/11 08:40:45 PM
コメント(2) | コメントを書く



PR

Profile


gtone

Calendar


Copyright (c) 1997-2020 Rakuten, Inc. All Rights Reserved.