まずは、見出しの背景に使う画像を用意
立体的に見せるためのグラデーション部分は、背景画像を使うことで実現しています。 冒頭のサンプルでは、以下のような背景画像を使いました。
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>項目名１</th>
<td>項目値を記述するセル１</td>
</tr>
<tr>
<th>項目名２</th>
<td>項目値を記述するセル２</td>
</tr>
<tr>
<th>項目名３</th>
<td>項目値を記述するセル３</td>
</tr>
</tbody>
</table>
<thead>～</thead>の中にあるth要素で「見出し」のセルを作っています。
colspan属性は、横方向にいくつのセルを結合させるかを指定する属性です。ここでは値に「2」を指定していますから、横方向に2つのセルを結合させることになります。
上記のソースを表示させると、以下のように見えます。
 |
枠線の表示だけ加えると、以下のように見えます。（table要素にborder属性を加え、値に1を指定しただけの状態）
 |
次に、スタイルシートを使って装飾します。
