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

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

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

まずは、見出しの背景に使う画像を用意

立体的に見せるためのグラデーション部分は、背景画像を使うことで実現しています。 冒頭のサンプルでは、以下のような背景画像を使いました。

trback1.jpg : グラデーション背景画像(赤)
trback2.jpg : グラデーション背景画像(青) / trback3.jpg : グラデーション背景画像(青:上下反転)
trback4.jpg : グラデーション背景画像(濃青) / trback5.jpg : グラデーション背景画像(濃青:上下反転)

使いたい背景画像を用意して下さい。上記の画像をコピーしてお使いいただいても構いません。

テーブル(表)を作るHTMLを書く

装飾するテーブル(表)をHTMLで記述します。
後からスタイルシートで装飾できるようクラス名(abc)を加えています。

<table class="abc">
<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>

<thead>~</thead>の中にあるth要素で「見出し」のセルを作っています。
colspan属性は、横方向にいくつのセルを結合させるかを指定する属性です。ここでは値に「2」を指定していますから、横方向に2つのセルを結合させることになります。

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

表の表示サンプル(装飾なし)
 

枠線の表示だけ加えると、以下のように見えます。(table要素にborder属性を加え、値に1を指定しただけの状態)

表の表示サンプル(枠線だけ付加)
 

次に、スタイルシートを使って装飾します。

  • 前のページへ
  • 1
  • 2
  • 3
  • 4
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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