ヘッダー・コニファロゴ
htmlで、細くてきれいな枠線の表組を作る(1)   → htmlで、細くてきれいな枠線の表組を作る(2)
1. cssを使わず、tableで単に
border="1" bordercolor="#aa9ef8"と指定。
これだと枠線がcss指定の3px程度に太ってしまう。
iモード(DoCoMo)
WILLCOM
EZweb(KDDI)
Yahoo Mobile
Yahoo!ケータイ(旧Vodafon live!)

2. 上の状態から、table指定を外し、各セルに
cssで色と「細い線=thin」を指定してみる:
bordercolor="#aa9ef8"
style="border-width: thin;" を追加。
しかし枠線の重なり合うところが太くなってしまう。
(しかもSafari以外ではどうも枠線が表示されない模様)
iモード(DoCoMo)
WILLCOM
EZweb(KDDI)
Yahoo Mobile
Yahoo!ケータイ(旧Vodafon live!)

3. cssで、各セルに枠線の指定を付ける。
border:1px solid #bbaaff;
上と同じく、枠線の重なり合うところが太くなってしまう。
iモード(DoCoMo)
WILLCOM
EZweb(KDDI)
Yahoo Mobile
Yahoo!ケータイ(旧Vodafon live!)

4. 枠線の重なりを防ぐため、
3種類のcssを使い分ける。
class="kei01" class="kei02" class="kei03"を使用。
.kei02 {border-top:1px solid #bbaaff; border-right:1px solid #bbaaff; border-left:1px solid #bbaaff; }など。
セル数が多くなるとちょっと面倒。
iモード(DoCoMo)
WILLCOM
EZweb(KDDI)
Yahoo Mobile
Yahoo!ケータイ(旧Vodafon live!)

5. また、tableにborder="" bordercolor=""の
指定だけだと、 Firefoxでは、cssのridgeの
指定をしたときのようになってしまう。
tableにborder="3" bordercolor="#aa9ef8"
代引金額
 代引手数料(税込)
1万円まで
315円
3万円まで
420円
10万円まで
630円
30万円まで
1,050円
50万円まで
2,100円
100万円まで
3,150円
100万円を超える場合
4,200円

6. 上と同じtableで、cssを使わず、
「4.」のような枠線を作る。
tableのbgに色を付け、各セルのbgを白に。
border="0" cellspacing="1" cellpadding="0" bgcolor="#bbaaff"。各セルでbgcolor="#ffffff"。
代引金額
 代引手数料(税込)
1万円まで
315円
3万円まで
420円
10万円まで
630円
30万円まで
1,050円
50万円まで
2,100円
100万円まで
3,150円
100万円を超える場合
4,200円

cssの利用が推奨されるところですが、
作業自体はこちらの方が楽。





  
●borderのその他の主なスタイル指定
css  class="kei51" を使用。border:3px double #bbaaff
Yahoo!ケータイ(旧Vodafon live!)

css  class="kei52" を使用。border:3px groove #bbaaff
Yahoo!ケータイ(旧Vodafon live!)

css  class="kei53" を使用。border:3px ridge #bbaaff
Yahoo!ケータイ(旧Vodafon live!)

css  class="kei54" を使用。border:3px inset #bbaaff
Yahoo!ケータイ(旧Vodafon live!)

css  class="kei55" を使用。border:3px outset #bbaaff
Yahoo!ケータイ(旧Vodafon live!)

● html、cssの文法の正当性をチェック
Another HTML-lint gateway
:HTML文書の文法をチェックし、採点してくれます。HTML文書中のDOCTYPE宣言を無視して、違うHTMLバージョンでのチェックが可能です。日本語。
W3C CSS Validation Service
:CSSの文法をチェック。日本語対応。


htmlで、細くてきれいな枠線の表組を作る(2)

 

戻るボタン
Copyright© 2019 Conifer,Inc. All rights reserved.