１４a．表のセルに背景画像を表示し文字を書き込む
　　雛形の作成
　　次のとおりと作成します。
１．ホームフォルダにファイル【test3a.htm】を作成する。
２．次ぎにアニメ工房のHTML作成ツールHTML Table Builderを使用する。
　　
　　HTML Table Builder の文字色：red　cellspacing；5
　　cellpadding： 5　セル幅(均等)：230に設定、右図の
　　ようにアルファベット aを３ヶ所、zを１ヶ所に入力し
　 【HTML 作成】ボタンをクリックする。

３．下の方にHTML文が作成され全て選択状態になるのでこれを

A1
A2B2C2
　　コピーしメモ帳に貼り付け上書き保存する。
　　右の形の表ができてセルの中にセル番号A1,A2,B2,C2が書き込まれる。
　　自動作成される雛形にたいし青文字の部分を書き換える。
　　画像のサイズは横240pixel 縦180pixelの場合です。
　　完成サンプル


<html lang="ja">
<head>
<title>画像に文字を重ねる</title>
<style type="text/css">
<!--
@import url(qqq.css);
body{font-size:22pt;color:red;background-image:url(top/w_br04r.gif)}
table{background-color:mintcream}
td{font-size:12pt;color:white}
.wh{width:230px;height:170px}
.fnt1{font-size:18pt;color:blue}
-->
</style>
</head>
<body>
<div align="center">
<br>テーブルのセルの背景画像に文字を重ねる。<br><br>
<table cellspacing="5" cellpadding="5">
<tr><td colspan="3" class="fnt1">
HTMLの記述で背景画像に文字を重ねることが出来ます。<br>
ただし、画像に対して文字位置を微妙に設定することは困難です。
</td></tr><tr valign="bottom" align="right">
<td class="wh" style="background-image:url(hana/hana2s.jpg)">
イカリソウ
</td><td class="wh" style="background-image:url(hana/hana3s.jpg)">
シモバシラ
</td><td class="wh" style="background-image:url(hana/hana4s.jpg)">
ユリ
</td></tr>
</table>
</div>
</body>
</html>


スタイルシート解説参照　　background-image:url()　　width　　height

タグ解説参照　　<table> cellspacing　cellpadding　　背景画像とセルサイズ
　　　　　　　　<tr> align　valign　　<td> background