■monocreator's [ 素材倉庫 ]

	ラインを作る
	・連続配置で作る・テーブルで作る
	テーブルを飾る

II. 私の場合

パターンを作る

I.　当サイトの素材の使い方

テーブルを飾る

ラインのテーブルを作るのと同じような方法で、四方に画像を使ってテーブルを飾ります。工夫次第で色々なテーブルが楽しめます。

＜例＞　上下左右、４つの画像を配置します


table1.gif ,	table2.gif ,	table3.gif ,	table4.gif ,

サイズ：　36px　×　10px


	ここに自由に文字を入れられます ※分かりやすくするために枠線を表示させてあります ※使用する画像を任意の場所に保存しておいて下さい

<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="10" height="10"><img src="spacer.gif" width="1" height="1"></td>
<td width="240" height="10" background="table1.gif"><img src="spacer.gif" width="1" height="10"></td>
<td width="10" height="10"><img src="spacer.gif" width="1" height="1"></td>
</tr>
<tr>
<td width="10" height="120" background="table2.gif"><img src="spacer.gif" width="10" height="1"></td>
<td width="240" height="120" bgcolor="#F6A5BE">ここに自由に文字を入れられます
<td width="10" height="120" background="table3.gif"><img src="spacer.gif" width="10" height="1"></td>
</tr>
<tr>
<td width="10" height="10"><img src="spacer.gif" width="1" height="1"></td>
<td width="240" height="10" background="table4.gif"><img src="spacer.gif" width="1" height="10"></td>
<td width="10" height="10"><img src="spacer.gif" width="1" height="1"></td>
</tr>
</table>

◆設定の内容について◆

<table>

テーブルの設定
cellspacing="0" …セルの間隔「ゼロ」
cellpadding="0" …セルの余白「ゼロ」
border="0" …枠線の幅「ゼロ」

例の場合は分かりやすくするために「border="1"」として枠線を表示させています。

<td>

【１】	【２】	【３】
【４】	【５】	【６】
【７】	【８】	【９】

セルの幅、高さの設定
【１】【３】【７】【９】の角のセルは同じ設定で幅と高さが同じ正方形です。<td width="10" height="10">
【２】【５】【８】の横幅「width="240"」と、
【４】【５】【６】の高さ「height="120"」は、指定しなくてもかまいません。指定しなければ【５】の中の要素に合わせて伸縮します。

セルの背景の設定
【２】【４】【６】【８】にそれぞれ背景画像を設定します。
「background="使用する画像へのパス"」
画像へのパスは、画像ファイルとhtmlファイルの保存先が同じ場所なら画像ファイル名を「●●.gif」や「●●.jpg」と指定してください。違う場所なら「保存先のフォルダ名／(スラッシュ)画像ファイル名」というようにパスを指定して下さい。
中央【５】は画像に合わせて「bgcolor="背景色"」を設定します。

<img>

セルの中に置く画像の設定
セルの高さや幅を調節するためにスペーサー画像をおきます。
【２】【８】は背景画像の高さと同じにします。
<img src="spacer.gif" width="1" height="10">
【４】【６】は背景画像の幅と同じにします。
<img src="spacer.gif" width="10" height="1">
【１】【３】【７】【９】の角のセルには、サイズを指定したものか、
<img src="spacer.gif" width="1" height="1">


	＜完成形＞


	＜応用１＞中央のセルの属性／背景色を「bgcolor="少し薄い色"」にして縁どりを強調してみる


	＜応用２＞テーブルの属性／セルの間隔を「cellspacing="１"」にして縁どりに間隔をあけてみる


	＜応用３＞任意の幅や高さを指定しなければ、中央の内容に合わせて、テーブルサイズが伸縮します。文字のサイズや量の変更の自由度が高くなります。