テーブル枠表示の基本？！

ちょっとは役に立つかな？ ☆楽天アフィリエイト向けテーブルタグ見本☆
テーブル枠表示の基本
テーブルやセルの枠表示はコレみたいに点線で囲むほか、何種類かあります。どんなのが出来るかちょちょっと見本をｗテーブルやセルの幅や文字の大きさは自由にかえて下さいね。

【その１】セルを「実線」で囲む

＊例＊

ココにテキストリンク

ココに説明文等○○○○○○○○○○○○
○○○○○○○○○○○○○○○○○○

上記のタグはコチラ

<TABLE width="500" cellpadding="3" cellspacing="0">
<TR>
<TD style="border-width : 1px ; border-style : solid　;　border-color : #ff8000 ; " width="100" height="100" align="center">★ココに商品画像リンクタグ★</TD>
<TD valign="top">★ココにテキストリンクタグ★<BR><BR>
★ココに説明文テキスト等★</TD>
</TR></TABLE>

【その２】セルを「点線」で囲む

＊例＊

ココにテキストリンク

ココに説明文等○○○○○○○○○○○○
○○○○○○○○○○○○○○○○○○

上記のタグはコチラ

<TABLE width="500" cellpadding="3" cellspacing="0">
<TR>
<TD style="border-width : 2px ; border-style : dotted ;　border-color : #008000 ; " width="100" height="100" align="center">★ココに商品画像リンクタグ★</TD>
<TD valign="top">★ココにテキストリンクタグ★<BR><BR>
★ココに説明文テキスト等★</TD>
</TR></TABLE>

【その３】セルを「二重線」で囲む

＊例＊

ココにテキストリンク

ココに説明文等○○○○○○○○○○○○
○○○○○○○○○○○○○○○○○○

上記のタグはコチラ

<TABLE width="500" cellpadding="3" cellspacing="0">
<TR>
<TD style="border-width : 3px ; border-style : double ;　border-color : #ff80ff ; " width="100" height="100" align="center">★ココに商品画像リンクタグ★</TD>
<TD valign="top">★ココにテキストリンクタグ★<BR><BR>
★ココに説明文テキスト等★</TD>
</TR></TABLE>

【ここでちょっと復習】

ちょっとタグを見てもらったらわかりますように、3行目「TD」の後の「style」で色々指定するんですね。

border-width　⇒　表示する線の幅を指定

border-style　⇒　実線・点線など、線種を指定

border-color　⇒　表示する線の色を指定

それぞれを「TABLE」タグ部に指定すると、テーブル全体の外枠を囲む線を表示する事が出来ます。
表示できる線種は他にも下記のようなものがあります。（border-style:★ココに線種を指定★;）

破線
↓
dashed

くぼみ線
↓
groove

浮き出し線
↓
ridge

インセット
↓
inset

アウトセット
↓
outset

上記の線の幅は破線は2ピクセル、その他は3ピクセルです。
いろいろ変えて試して見て下さいね。

ジャンル別一覧