開設１００日記念！TABLEのTAG表記

420955

開設１００日記念！TABLEのＴＡＧ表記

まずはＴＡＢＬＥを表記する時のの基本です！

＜table＞をまず最初に表記します！
その次に＜tr＞の１行を示すＴＡＧ表記です！
次に＜td＞のセルを示すＴＡＧ表記をします！
このセルとは１マスの中に入れるデータの内容を
書きこむ場所です！
ここに文字の大きさ、色、太さなどを表記し
表示させたい文字を書いたり、画像、そしてリンク
などを表記させます。

文字の表記：大きさ

＜font size=大きさ１～７　（通常は３指定しない場合）＞その大きさにさせたい文字＜/font＞

文字の表記：色　

＜font color=色の名前を英語で書く＞その色にさせたい文字＜/font＞
この上の二つは一つの括弧の中に収めることが出来ます。

例：＜font size=5 color=red＞　（文字が５の大きさで色が赤）

太さの表記は＜b＞太くしたい文字＜/b＞

斜め字＝斜体の表記：＜i＞斜めにさせたい文字＜/i＞

画像の表記：楽天の場合は画像の倉庫から表示させたい画像を選択し
　　　　　　出てきたページの画像の下にある
　　　　　　＜IMG SRC="http://plaza.rakuten.co.jp/img/user/～＞を
　　　　　　右クリックしてコピーします。そしてこのセル内の所に
　　　　　　貼りつければいいわけです。この＜IMG SRC=～＞の中にある
　　　　　　width="数字" height="数字"は
　　　　　　画像のヨコ（幅）とタテ（高さ）の大きさを
　　　　　　あらわしています。
　　　　　　width="画像の幅を指定する大きさの数字"
　　　　　　height="画像の高さを指定する大きさの数字”を
　　　　　　表記することが可能です。

リンクの表記：

＜a href=http://www.～＞リンク先のタイトル文字または画像＜/a＞

以上を表記した上で＜/td＞で閉じます。
同じ１行の中にもうひとつセル（１マス）を追加する時は
また＜td＞データ：文字、画像、リンクなど＜/td＞を表記する。
１行のデータの中にセルを終わらせるために＜/tr＞で閉じる。
次の行にもう１行追加したい場合、同じく
＜tr＞＜td＞データ：文字、画像、リンクなど＜/td＞＜/tr＞を表記する。
そしてこの表（テーブル）自体を終わらせるには＜/table＞で閉じます。

これで以上のtableのＴＡＧ表記の仕方です。

そしてここからが応用と一段階上の技に値する表記

テーブル全体の大きさを指定できます。

＜table width=数字＞

例：＜table width=640＞テーブルの横幅を６４０ピクセルに指定します。
　　　　　　　　　　　　640ﾋﾟｸｾﾙがちょうど画面いっぱいになる大きさに
　　　　　　　　　　　　値します。

またはパーセンテージ（％）で指定します。
例：＜table width=100%＞テーブルの横幅を１００％に指定します。
　　　　　　　　　　　　　100%は上の640ﾋﾟｸｾﾙと同じくらいの大きさです。

テーブルの線の太さを指定できます。
＜table border=数字＞

例：＜table border=1＞テーブルの線の太さを１の太さに指定します。
例：＜table border=0＞テーブルの線の太さを０の太さに指定します。
　　　　　　　　　　ということは線が表示されません。
　　　　　　　　　　もしくは線を表示させない時はborder=0を表記しなくても
　　　　　　　　　　いいということです。

テーブルの線の色を指定できます。
＜table bordercolor=色の名前を英語で表記＞＜/table＞

例：＜table bordercolor=green＞テーブルの線の色を緑に指定します。＜/table＞

この時にborder=数字に指定している時には色がつきますが、
border=0やborder=数字を表記していない時は色がつきません。

テーブルの全体の背景色を指定できます。
＜table bgcolor=色の名前を英語で表記＞＜/table＞　

例：＜table bgcolor=pink＞テーブルの背景色をピンクに指定します。

このbgcolorを指定しない場合透明で背景の壁紙がそのまま
テーブルの背景色になります。

行単位でセル内の文字の配置を指定できます。
＜tr align=配置する指定の単語表記＞＜/tr＞

例：＜tr align=center＞セルの１行内の文字を真ん中にさせたい文字＜/tr＞

上記の場合trのあとにalign=centerを書かない場合は自動的に左揃えになります。
もし最初から指定したい場合はcenterをleft（左揃え）かright（右揃え）に
変えればなります。
その他の方法として真ん中にする方法だけですが他にあります。
下記の通りにすると上記の＜tr align=center＞と同じ状態になります。

例：＜tr＞＜center＞セルの１行内の文字を真ん中にさせたい文字＜/center＞＜/tr＞

上記の場合セルごとのデータの位置も同じようになります！
trをtdに変えると同じようになります。

テーブルのセルごとに背景色を指定できます。
＜td bgcolor=色の名前を英語で表記＞

例：＜td bgcolor=beige＞テーブルのセルの一つの背景色を
　　　　　　　　　　　　ベージに指定します。

行ごとでの背景色指定も可能です！
その場合の表記方法例；＜tr bgcolor=色の名前＞～

セル内の文字などの横位置の配列について
左側（left）・中央（center）・右側（right）を
表記する方法例：＜td align=横位置表記タグ＞文字か画像など＜/td＞

セル内の文字などの縦位置の配列について
上部（top）・中央（middle）・下部（bottom）を
表記する方法例：＜td valign=縦位置表記タグ＞文字か画像など＜/td＞

上記の文字などの配列の方法横と縦は一緒のカッコの中でＯＫ！
例：＜td align=center valign=top＞文字か画像など＜/td＞
上記の場合は文字か画像などを上付きでセル内の中央に表示する方法です！

テーブルの枠の線、いわゆるborder=1以上の時の線ですが、
この線にも色をつけることが出来るんです！
これは上のほうでも紹介しましたが
上のほうの紹介では全たでの色でしたね！
色をつけないでそのままでの表示にしてよく見ると
左側の縦線と一番上の線の色は同じですが、右側の縦線と
一番下の線が同じ色ですが少しくらい色に
なるのがお気づきでしょうか？
下のものを見てみればわかります！

よ～く見て下さい！
上と左の線は同じ色でしょ？
それと右と下の線は同じ色！
これは影になっている部分の色です！

この部分にもそれぞれ色がつけられるんです！
左側の縦線と上の部分の色をつける表記は
ＢＯＲＤＥＲＣＯＬＯＲＬＩＧＨＴになり、
影の部分になる右側の線と下の線の表記は
ＢＯＲＤＥＲＣＯＬＯＲＤＡＲＫになります！
＜table width=60% border=5 bordercolorlight=red bordercolordark=blue＞＜tr＞＜td＞＜/td＞＜/tr＞＜/table＞
線の太さが５、影じゃない部分が赤、影の部分が青になる表記です！
上の表記を実行した場合は、下記のようになります！

どうですか？なってるでしょ？（楽天では非認識のようです）

こちらのページも見てみてね！