テーブル装飾

ここでは、ホームページ上のテーブルを装飾する方法を紹介していきます。


border-collapse[各セル枠線を重ねる]

テーブルの各セル(マス)の枠線は何も指定しないと隙間があいているのですが、その隙間を無くして線を重ねることが出来ます。 CSSでテーブル各セルの枠線を重ねるにはborder-collapseを指定します。

指定可能値separate(隙間をあける), collapse(重ねる), inherit(親要素指定を継承)
[補足]枠線の表示方法

記述例

[例1]テーブル各セルの枠線を重ねる
table {border-collapse:collapse;}


table-layout[テーブル横幅を固定]

テーブル全体の横幅は何も指定しないと内容(文字数、画像サイズ)によって幅が変わるのですが、その横幅を一定の幅に固定することが出来ます。 CSSでテーブルの横幅を固定するにはtable-layoutを指定します。

指定可能値auto(通常,幅自動調整), fixed(幅固定), inherit(親要素指定を継承)

記述例

[例1]幅500ピクセルに固定
table {table-layout:fixed; width:500px;}