tableタグのcellspacing等をCSSのみで指定する

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プロパティの指定です。

まとめ:tableタグとCSSの対応表
cellspacing → border-collapse、border-spacing
cellpadding → tdタグの padding
border → border-width または border

そんなわけで、HTMLタグだけで指定したほうが文字数は少なく抑えられますが、わざわざスタイルシートを使うメリットはもちろん、見栄えと構造が分離されることでソースの見通しが良くなるからです。
最近はブラウザのCSS対応状況もかなり改善されてますから、CSSで指定可能な見栄えは極力CSS依存にしたほうが良いのではないかと思います。

テーマ: web制作 - ジャンル: コンピュータ

コメント

どうもありがとうございました。CSSでどうすればいいか分からなかったので解決できました。

  • 2012/11/19(月) 17:52:37 |
  • URL |
  • おまもり #-
  • [ 編集]

ありがとうございます。大変役立ちました

  • 2015/06/10(水) 10:08:46 |
  • URL |
  • つー #-
  • [ 編集]

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバックURLはこちら
http://itpc.blog87.fc2.com/tb.php/49-130e8bc5
この記事にトラックバック(FC2ブログユーザ用)