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

テーブルの見出しだけ立体的にする(4ページ目)

テーブル(表)を装飾する際、枠線や背景色を加えるだけではシンプルなので、見出し部分の装飾に少し凝ってみてはいかがでしょうか。見出しのセルだけ、グラデーションを使って立体的に見えるよう装飾してみましょう。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

ソースのまとめ

すべてのソースをまとめて掲載しておきます。コピー&ペーストして使ってみる際などにご活用下さい。

<table class="red">
<thead>
   <tr>
      <th colspan="2">テーブルの見出し</th>
   </tr>
</thead>
<tbody>
   <tr>
      <th>項目名1</th>
      <td>項目値を記述するセル1</td>
   </tr>
   <tr>
      <th>項目名2</th>
      <td>項目値を記述するセル2</td>
   </tr>
   <tr>
      <th>項目名3</th>
      <td>項目値を記述するセル3</td>
   </tr>
</tbody>
</table>
/* ▼テーブル全体の装飾▼ */
table.red {
   border-collapse: collapse; /* 枠線を重ねる */
   border: 1px solid #e0aaaa; /* 外枠の装飾 */
}
/* ▼テーブル内側(セル)の装飾▼ */
table.red th,
table.red td {
   padding: 0.3em;            /* セル内側の余白量 */
   border: 1px solid #e0aaaa; /* 内枠の装飾 */
}
/* ▼テーブルの見出し部分の装飾▼ */
table.red thead th {
   background-image: url("./trback1.jpg"); /* 背景画像 */
   background-position: bottom left; /* 背景画像の配置 */
   color: #cc0000;            /* 文字色 */
   background-color: #ffeeee; /* (念のための背景色) */
}
/* ▼各行の見出し部分の装飾▼ */
table.red tbody th {
   background-color: #ffeeee; /* 背景色 */
   color: maroon;             /* 文字色 */
}

上記のソースを表示させると、以下のように見えます。

サンプル2
 

おわりに

今回は、グラデーション背景画像を使って表の見出し部分を立体的に見せる装飾をご紹介いたしました。 ただスタイルシートで背景画像を表示させるだけの簡単な方法です。 ぜひ使ってみて下さい。

なお、記事中でサンプルに使用したグラデーション画像(下記)は、必要であればご自由にコピーしてご活用下さい。

グラデーション背景画像(赤)グラデーション背景画像(赤:上下反転)   グラデーション背景画像(青)グラデーション背景画像(青:上下反転)
グラデーション背景画像(濃青)グラデーション背景画像(濃青:上下反転)   グラデーション背景画像(緑)グラデーション背景画像(緑:上下反転)
グラデーション背景画像(黄)グラデーション背景画像(黄:上下反転)   グラデーション背景画像(黒)グラデーション背景画像(黒:上下反転)

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

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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