投稿‎ > ‎

tableタグとCSSの対応表

posted Mar 19, 2013, 3:42 AM by Zhang Wenxu   [ updated Jul 19, 2013, 9:02 AM ]
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を指定します。
ここではクラス名を 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プロパティの指定です。
Google+
By Zhang Wenxu
Comments