ホームページ作成/テーブル(表)の作成・装飾 (HTML,CSS)

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

表を構成するセルの枠線だけが立体的に見えるのではなく、表のセル1つ1つそのものが立体的に見える表を作ってみましょう。なかなか見栄えのよい表ができあがります。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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

まずは、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)を付けています。

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

セル全体が立体的に見える表
 

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

【編集部おすすめの購入サイト】
楽天市場でホームページ作成関連の書籍を見るAmazon でホームページ作成の参考書を見る
  • 前のページへ
  • 1
  • 2
  • 3
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます