Web2.0といわれ始めたころから、かくかくしたデザインよりも、角が丸いボックスのデザインが取り入れられ始めました。
Internet Explorer(IE)への対応を考えると、画像を用いて処理したり、Javascriptなどを利用する方法がありますが、IEを考えずにChrome,Safari,Firefoxのみの対応を考えると、CSSだけでボックスの角を丸くすることができます。
CSS3に対応したブラウザで見ることができます。
以下、divやtableの角を丸くする方法です。
半径10pxの角ができます。
-webkit-border-radius: 10px; /*Chrome、Safari用*/ border-radius:10px; /*Firefox用*/ -border-radius:10px; /*IE9用*/
Webサイト作成時、画像をいかに作るかはユーザーナビゲーションの大事な部分ですが、画像はメンテナンスが面倒（その都度画像ソフトで編集しなければならない）であったり、専門的な知識が必要だったりします。
そこで、CSSを使ってボタン風に表示することができます。
オンラインコンサルタントのサイトの左バーで使っている方法です。
--css--
.side div {font-size:12px;
font-weight:bold;
border-bottom:solid 1px white;
}
.side a{color:#444444;
text-decoration:none;
display:block;
padding-top:8px;
padding-bottom:8px;
padding-left:12px;
padding-right:0px;}
.side a:hover {color:#000000;
background-color:#FFE4E1;}
--html-- <td class="side" > <div><A href="system.htm">利用方法</a></div> <div><A href="/target/beginner.htm">初心者の方へ</a></div> <div><A href="/target/sylver.htm">高齢者の方へ</a></div> <div><A href="/target/buisiness.htm">ビジネスユーザーへ</a></div> ・・・以下略
最後のa:hoverはマウスを重ねた時に、背景色が変わるような効果です。
例えば、もっと立体的に見せる方法もあります。
→CSSでボタン画像風にリンクを作る
CSSでボタン風にリンクを作るで紹介したように、divタグでblock要素にすると、CSSを使って簡単にボタン画像風にリンクを作ることができますが、それだけだと立体感や、“つるっ”と感は中々出ません。
そこで、ちょっとした工夫で立体的に見せる方法です。
立体的に見せるということは、光と影を作るということです。
つまり、左及び上のborderをbackgroundの色より少し明るい色、右及び下のborderを暗い色にすると、立体感がでます。
例です。
---CSS---
.menu div {font-size:12px;
color:#333333;
line-height:130%;
font-family:sans-serif;
text-align:left;
vertical-align:top;
border-top:solid 1px #ffffff;
border-left:solid 1px #ffffff;
border-right:solid 1px #999999;
border-bottom:solid 1px #999999;
margin-top:0px;
display:block;
}
.menu a{color:#333333c;
text-decoration:none;
display:block;
width:138px; padding-top:3px;
padding-bottom:3px;
padding-left:10px;
padding-right:5px;
}
.menu a:hover{background:#AFBEFA;
color:#000000;
}
--html--- <td class="menu" ><div><a href="#.html">サンプル1</a></div> <div><a href="#.htm">サンプル2</a></div> <div><a href="#.htm">サンプル3</a></div></td>
最後の.menu a:hoverは、マウスを重ねた時に背景色が変わるようになっています。
また、全体的にこの背景に、グラデーションなどの画像を配置すると、より画像ボタン風のつるっとした立体的な感じがでます。
最近だと、CSS3を使って、次のように作った方がいいかもしれませんね。
CSS3 グラデーションボタンを作る
文字コードがあっているか、あるいは文字コード指定をしているか、確認してみましょう。
情報元：CSSのテーブルで色分けをする場合 | OKWave
http://okwave.jp/qa/q1233020.html
行単位で装飾したいのならばtdではなく、trにclassを指定してはどうでしょう。
HTML
・・・
・・・
CSS
tr.xxx td {background-color:#888;}
↑class=’xxx’の tr の配下にある td というセレクタになります。
なお、テーブルはいくつかのブロックに分けられます。
色を変えたいというならば意味があるのでしょうから、ブロックを変える
→thead、tbodyを使い分ける、tbodyでも別のブロックにする
セルの種類を変える
→td、thを使い分ける
等、そうした区別を検討してもいいのかも。
例
| 出席番号 | 名前 |
|---|---|
| 1 | 木村太郎 |
| 2 | 山田花子 |
各ブロックのセルの背景色を変えるには
thead th{backgrond-color:xxx;}
tbody.male th,tbody.male td{backgrond-color:xxx;}
tbody.female th,tbody.female td{backgrond-color:xxx;}