テーブルの色について

テーブルに色付けする際に参考となりそうなサンプルを載せておきます。

幅1pxの線のテーブルを書く方法

table {                       /*テーブルタグについて指定*/
border-collapse:separate; /*ボーダーを分離して表示*/
border:0px;               /*ボーダーを0ピクセル*/
border-spacing:1px;       /*セル間隔を1ピクセル*/
background-color:#00ff00; /*背景色を緑にする*/
}
td,th {                       /*通常セルと見出しセルについて指定*/
padding:5px;              /*セル余白5ピクセル*/
border:0px;               /*セルボーダー0ピクセル*/
background-color:#ffffff; /*セル背景色を白*/
}

テーブルとセルのボーダーを0pxとし、セル間隔の場所のみ緑色の色を付けています。
セルは通常の背景と同じ白でテーブルに上書きしています。
このCSSコードは、カラーコードを変えるだけで自在に使えます。

広告

関連コンテンツ