tableタグにinlineスタイルの記述とCSS記述の対応表 cellspacing → border-collapse、border-spacing cellpadding → tdタグの padding border → border-width または border tableタグでセルの空白を無くす場合、
<table border="0" cellspacing="0" cellpadding="0"> などと指定しますが、これをスタイルシートでやりたい場合どうすれば良いか解説します。 (自分がよく忘れるのでメモとして(^_^;) まず、tableタグで CSSの classを指定します。
Google+
ここではクラス名を 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プロパティの指定です。 By Zhang Wenxu |
投稿 >