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 */ }