tableのデザインとCSS

2011.02.12 21:45
 何だかんだでテーブルというのは、今でも尚結構簡単にセルが組めるというもんでして、何もdivタグで必死こいてネストしてゆくなんていうことが必要のないところでは必要がないわけでして、そういう場合はテーブル使うのが一番です。そんなわけでテーブルにCSSを使う方法です。テーブルのデフォルトのデザインはかなり恰好悪いので、ちょっと一度CSSで作ってしまって永遠に使いまわすというのが一番いいです。
 ここ最近のやり方では、1pxでボーダーを組んでしまう方法です。Sample
 この方法が一番綺麗で安定しているかな...と。
table {
    margin: 10px 5px;
    border-top:1px solid #c1c1c1;
    border-left:1px solid #c1c1c1;
    border-spacing:0;
    background-color:#ffffff;
    empty-cells:show;
}
th {
    border-right:1px solid #c1c1c1;
    border-bottom:1px solid #c1c1c1;
    color:#383125;
    font-weight: normal;
    background-color:#efefef;
    /*background-position:left top;*/
    padding:0.1em 1em;
    text-align:center;
}
td {
    border-right:1px solid #c1c1c1;
    border-bottom:1px solid #c1c1c1;
    padding:0.2em 1em;
}   

table.JPG  注意すべき点はいくつかあって、border-spacing:0;っていうところです。これやっておかないとテーブルのデフォルトのデザインのなんか下手に立体的にするようなダサいデザインが適用されてしまいます。ここは注意。  もう一つは、empty-cells:show;です。値がなくともセルを表示させておくようにします。むかしだったら<td><br /></td>という感じでセルに改行を入れておくと表示されるなんていう強引な技がありましたが、理屈はそれと同じです。 ボーダーの設定は、上記図のような感じです。まどろっこしいですが、これしかやりようがない。

 ここ最近ではキャプションとかなんとかいろんなタグが増えていますが、ここで割愛。基本的にはこんなようなのでできるというので勘弁してください。






プロフィール



  • Name :: 山上オサム ♂(39)
  • Hobby :: 武術
  • Work :: Web Designer