Web Artisan Blog - ウェブ アルチザン ブログ

tableタグの枠線に色を付ける方法です。
やり方は色々あると思いますが、今回はCSSの”border-collapse”を使います。

昔はtableの枠線に色を付ける為に邪道なやり方をやってました。
対象のtableタグを更にtableタグで囲って、そのtableタグに背景色を指定し、
cellpaddingやcellspacingを駆使して少し間隔をずらして表示させる。。

数年前に、とあるプロジェクトで画面デザインをデザイナーに頼んだときに、
初めて上に書いたようなhtmlソースを見ました。
当時は、「すげー、こんなやり方もあるんや」と感心したもんですが、
今、こんなソースに出会うと腹立たしく感じます。
CSS使いましょうね、レイアウト定義は。

で、本題ですが、tableの枠線色を付けるには、
”border-spacing”と”background-color”なんかを使ってもできます。