フリー（無料）素材集/壁紙工房｜蓮屋 rEnya wEb-factory

画像サンプル

■テーブルコレクション（角丸テーブル6）■


	■ここにテキストが入る

表組を利用してレイアウトしたテーブルテンプレート「テーブルコレクション」です。
<TD>タグに背景画像を指定したテーブルを作り、そのなかにコメントを書き込みます。
※ダウンロードファイルにはテーブルを構成する画像とHTML書類が入っています。
HTML書類を各自お持ちのテキストエディターで開いてカスタマイズして御利用下さい。
※このテーブルコレクションは背景画像を白にして御利用下さい。
画像を一括でダウンロードできます。

ダウンロード（sit）
ダウンロード（zip）

■解説

先ず３行３列の表を作成します。表の枠線（ border）とセル同士の間隔（cellspacing）セル内の余白（cellpadding）を０にします。このテーブルコレクションに使用している画像は横幅が522ピクセルなので表の横幅を522ピクセルに指定します（width)。

colspanを使って表の１行目と３行目を１列にします。colspanはセルを列方向につなげる属性です

表の１行目と３行目に画像を配置します。このとき画像の横幅（width）と縦幅（height）を必ず指定します。

表の２行目の１列と３列のセルに画像を配置するのですが、このとき（３）のようにセル内に配置するのではなくbackgroud属性を使い表の背景画像として画像を指定します。そして２列目は背景色に１列目と３列目の画像と同じ色をbgcolorで指定します。

<TABLE border="0" cellpadding="0" cellspacing="0" width="522">
<TR valign="top">
　 <TD colspan="3">
<IMG SRC="img/had.gif" width="522" height="20" border="0" >
　 </TD>
</TR>
<TR valign="top">
　 <TDbackground="img/l_body.gif" width="22"></TD>
　 <TD bgcolor="#カラーコード" width="478">ここにテキストが入る</TD>
　 <TD background="img/r_body.gif" width="22"></TD>
</TR>
<TR valign="top">
　 <TD colspan="3">
　 <IMG SRC="img/foot.gif" width="522" height="20" border="0" >
　 </TD>
</TR>
</TABLE>

以上の手順で作成したものが下のサンプルです。（表組が判りやすいように外枠を表示してあります）


	■ここにテキストが入る