セルの罫線の変更 | Dreamweaver入門

テーブルの線の太さを変える方法です。
CSSで記述しました。

table {
border-collapse:separate;
border:0px;
border-spacing:1px;
background-color:#000000;
}
td,th {
padding: 5px;
border:0px;
background-color:#ffffff;
}

border-collapse:separate;
はセルを分離する事を意味します

borderは外枠線です。

border-spacingがセルの境界線の太さです。ここでは1ピクセルです。

background-colorは背景色です。セルの色によって上書きされるので、ここでは境界線の色となります。ここでは黒です。

paddingはセルの内枠線と文字の間の余白です。
セルのバックグラウンドカラーはここでは白となっています。

このソースはスタイルシートファイルに貼り付けて少しパラメータを加工すれば使えると思います。

CMSで使う時はテーブルにマージンを設定した方がきれいに表示されると思います。マージンのサイズは<p>タグを参考にすると速いでしょう。

このテクニックの肝はセル間隔で太さを決め、テーブルの背景色で境界線のみ塗りつぶす事です。HTMLでもできるのですが手順が複雑なのでCSSを紹介しました。

関連記事