4本の線のテイストを変える その1
楽天ブログ＆アフィリエイトで使えるＨＴＭＬ小技集
TABLEタグでもっと自由にレイアウト
TABLEタグでもっと自由にレイアウト
●4本の線のテイストをバラバラに変える その1
ここでご紹介するのは長いHTMLを書く方法です
線を変えてテーブルレイアウトを多様にする方法は前回紹介した方法
1.線種と太さをかえる
2.テーブルの四辺の1辺だけを表示する
で実際のところ十分かと思われますので、このページは読み飛ばしてくださっても問題ないと思います
さらに突っ込んでお勉強したいという方はどうぞご利用ください
ここでご紹介するのは長いHTMLを書く方法です
線を変えてテーブルレイアウトを多様にする方法は前回紹介した方法
1.線種と太さをかえる
2.テーブルの四辺の1辺だけを表示する
で実際のところ十分かと思われますので、このページは読み飛ばしてくださっても問題ないと思います
さらに突っ込んでお勉強したいという方はどうぞご利用ください
●
四辺それぞれの線種を変える
<table style="border: 1pt #666666;
border-style: solid dotted double dashed;" >
<tr><td></td></tr>
</table>
border-style: solid dotted double dashed;" >
<tr><td></td></tr>
</table>
border-style
：
solid
dotted
double
dashed
；
上辺
左辺
下辺
右辺
時計周りに指定
します
さらに
border- top-style : solid; で 上辺の線種 を
border- bottom-style : solid; で 下辺の線種 を
border- left-style : solid; で 左辺の線種 を
border- right-style : solid; で 右辺の線種 を
それぞれ指定できます
border- top-style : solid; で 上辺の線種 を
border- bottom-style : solid; で 下辺の線種 を
border- left-style : solid; で 左辺の線種 を
border- right-style : solid; で 右辺の線種 を
それぞれ指定できます
●
四辺それぞれの色を変える
<table style="border: 1pt solid;
border-color: #e6001a #ff8700 #669933 #1a6680;" >
<tr><td></td></tr>
</table>
border-color: #e6001a #ff8700 #669933 #1a6680;" >
<tr><td></td></tr>
</table>
border-color
：
#e6001a
#ff8700
#669933
#1a6680
；
上辺
左辺
下辺
右辺
こちらも 時計周りに指定
します
さらに
border- top-color : #666666; で 上辺の色 を
border- bottom-color : #666666; で 下辺の色 を
border- left-color : #666666; で 左辺の色 を
border- right-color : #666666; で 右辺の色 を
それぞれ指定できます
border- top-color : #666666; で 上辺の色 を
border- bottom-color : #666666; で 下辺の色 を
border- left-color : #666666; で 左辺の色 を
border- right-color : #666666; で 右辺の色 を
それぞれ指定できます
© Rakuten Group, Inc.
