セル全体が立体的に見える表組みを作る(3ページ目)

セル全体が立体的に見える表を作るソース

まずは、HTMLで表を作ります。
表を作るには、table要素で表全体を、tr要素で行を、th要素でヘッダセルを、td要素でセルを表現します。

サンプルHTMLソースは、次の通りです。

<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 というclass名を加えています。 この表だけに対してスタイルを適用するため、何らかのclass（クラス）名を加えておく必要があります。 ここでは sample としていますが、何でも分かりやすい名称を付けて下さい。

table要素に「 cellspacing="0" 」という属性の記述を加えています。 これは、セルとセルの間隔を指定する属性で、ここでは値 0 を指定していますので、セルとセルの間隔をなくしています。 本来これは不要な指定ですが、スタイルシートの「セルとセルの間隔を調整する」プロパティである border-spacingプロパティに、Internet Explorerが対応していないため、 その対策として記述しています。

次にスタイルシートです。

/* 表全体のデザイン */
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 */
}

※1～3：
border-colorプロパティで、セルの枠線の色を指定します。値は4つ指定しています。値を4つ記述した場合、上線・右線・下線・左線の順として解釈されます。
background-colorプロパティで、セルの背景色を指定します。

※1：
ここでは、明るめの緑色（#ccffcc）と暗めの緑色（#7ca866）で枠線に色を付けています。背景色にはその中間くらいの色（#bceaa8）を付けています。

※2：
ここでは、明るめの黄色（#ffffcc）と暗めの黄色（#aca866）で枠線に色を付けています。背景色にはその中間くらいの色（#eceaa8）を付けています。

※3：
ここでは、白色（#ffffff）と暗めの灰色（#aca899）で枠線に色を付けています。背景色にはその中間くらいの灰色（#ecead8）を付けています。

これを表示すると、以下のように見えます。

一般的な表のデザインに飽きたら、ぜひ試してみて下さい。