<table border="0" cellspacing="0" cellpadding="0">
などと指定しますが、これをスタイルシートでやりたい場合どうすれば良いか解説します。
（自分がよく忘れるのでメモとして(^_^;）
まず、tableタグで CSSの classを指定します。
ここではクラス名を tbl1 とします。
<table class="tbl1">
次に、CSSファイルやstyleタグ等で、下記のように指定します。
table.tbl1 {
border-collapse:collapse;
border:0px;
}
table.tbl1 tr td {
padding:0px;
}
border-collapseがボーダーの隙間を作るかどうかのプロパティで、collapseを指定することで隙間が無くなります。
これがtableタグの cellspacing="0"に相当します。
また、例えば2ピクセルの隙間を作りたい場合は、下記のように指定します。
border-collapse:separate;
border-spacing:2px;
border-collapseプロパティにseparateを指定することで隙間が出来るようになり、border-spacingプロパティでその隙間の幅を指定します。
更に 2px 1px 等とすることで、上下左右別に幅を指定することも可能なようです。
ただし、border-spacingはFirefoxやOperaではサポートされていますが、肝心のIEは対応していません。困ったことです。。
その他、tableタグのborder属性に相当するのは、border または border-widthプロパティで、cellpadding属性に相当するのは、tdタグへのpaddingプロパティの指定です。
まとめ：tableタグとCSSの対応表
cellspacing → border-collapse、border-spacing
cellpadding → tdタグの padding
border → border-width または border
そんなわけで、HTMLタグだけで指定したほうが文字数は少なく抑えられますが、わざわざスタイルシートを使うメリットはもちろん、見栄えと構造が分離されることでソースの見通しが良くなるからです。
最近はブラウザのCSS対応状況もかなり改善されてますから、CSSで指定可能な見栄えは極力CSS依存にしたほうが良いのではないかと思います。
テーマ: web制作 - ジャンル: コンピュータ
