.SilverFox//Diary―“unlimited blog works”

ダイアリーを継ぐもの

セル全体が立体的に見える表組みを作る - [ホームページ作成]All About

htmlの表にCSSを使って立体的に見栄え良く見せるためのテクニックです。
どうも、テーブルのCSS親子関係が曖昧だったのだけれど、今回のページを見て納得。
色の調整が多少面倒ですが、CSSエディッタを使えば楽に出来そうです。

<table cellspacing="0" class="sample">
<thead>
   <tr><th>ブラウザ</th><th>最新版</th><th>公開年</th><th>開発元</th></tr>
</thead>
<tbody>
   <tr><th>Internet Explorer</th><td>6.0</td><td>2001</td><td>Microsoft</td></tr>
   <tr><th>Netscape Navigator</th><td>7.1</td><td>2003</td><td>Netscape</td></tr>
   <tr><th>Firefox</th><td>1.0.7</td><td>2005</td><td>Mozilla Foundation</td></tr>
   <tr><th>Opera</th><td>8.5</td><td>2005</td><td>Opera</td></tr>
   <tr><th>Safari</th><td>1.2</td><td>2005</td><td>Apple</td></tr>
</tbody>
</table>
/* 表全体のデザイン */
table.sample {
   border-spacing: 0px;   /* セルの間隔をなくす */
   font-family: Verdana,sans-serif;   /* フォントの指定 */
   font-size: smaller;   /* 文字サイズを小さめに */
}
/* セルのデザインのうちヘッダと中身の共通部分 */
table.sample th, table.sample td {
   border-width: 1px;   /* セルの枠線は太さ1ピクセル */
   border-style: solid;   /* セルの枠線は実線 */
   padding: 2px;   /* セル内側の余白は2ピクセル */
}
/* ヘッダセルのデザイン */
table.sample thead th {
   border-color: #ccffcc #7ca866 #7ca866 #ccffcc;   /* ※1 */
   background-color: #bceaa8;   /* ※1 */
}
table.sample tbody th {
   border-color: #ffffcc #aca866 #aca866 #ffffcc;   /* ※2 */
   background-color: #eceaa8;   /* ※2 */
}
/* セルのデザイン */
table.sample td {
   border-color: #ffffff #aca899 #aca899 #ffffff;   /* ※3 */
   background-color: #ecead8;   /* ※3 */
}