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

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

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を指定しただけの状態)

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

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