テーブル内に背景画像を並べる
テーブル内に背景画像を縦横に並べる
repeat-x 画像を横方向に繰り返すrepeat-y 画像を縦方向に繰り返す
サンプルでは表を見やすくするために枠線を表示しています。
テーブルに枠線を付けるのには border= と cellspacing= を使います。
border で枠線の高さを cellspacing で枠線の太さを変えることが出来ます。
背景色が枠線の色になります。
背景画像をテーブルの上に並べる
背景画像をテーブルの上に並べる |
<table width="300" height="200" cellspacing="1"
bgcolor="#999999">
<tr>
<td style="background:url(画像のファイル名) repeat-x top; background-color:#ffffff">
</td>
</tr>
</table>
上記のソース<tr>
<td style="background:url(画像のファイル名) repeat-x top; background-color:#ffffff">
</td>
</tr>
</table>
背景画像をテーブルの下に並べる
背景画像をテーブルの下に並べる |
<table width="300" height="200" cellspacing="1"
bgcolor="#999999">
<tr>
<td style="background:url(画像のファイル名) repeat-x bottom; background-color:#ffffff">
</td>
</tr>
</table>
上記のソース<tr>
<td style="background:url(画像のファイル名) repeat-x bottom; background-color:#ffffff">
</td>
</tr>
</table>
背景画像をテーブルの中央横に並べる
背景画像をテーブルの中央横に並べる |
<table width="300" height="200" cellspacing="1"
bgcolor="#999999">
<tr>
<td style="background:url(画像のファイル名) repeat-x center; background-color:#ffffff">
</td>
</tr>
</table>
上記のソース<tr>
<td style="background:url(画像のファイル名) repeat-x center; background-color:#ffffff">
</td>
</tr>
</table>
背景画像をテーブルの左側に並べる
背景画像をテーブルの左側に並べる |
<table width="300" height="200" cellspacing="1"
bgcolor="#999999">
<tr>
<td style="background:url(画像のファイル名) repeat-y left; background-color:#ffffff">
</td>
</tr>
</table>
上記のソース<tr>
<td style="background:url(画像のファイル名) repeat-y left; background-color:#ffffff">
</td>
</tr>
</table>
背景画像をテーブルの右側に並べる
背景画像をテーブルの右側に並べる |
<table width="300" height="200" cellspacing="1"
bgcolor="#999999">
<tr>
<td style="background:url(画像のファイル名) repeat-y right; background-color:#ffffff">
</td>
</tr>
</table>
上記のソース<tr>
<td style="background:url(画像のファイル名) repeat-y right; background-color:#ffffff">
</td>
</tr>
</table>
背景画像をテーブルの中央縦に並べる
背景画像をテーブルの中央縦に並べる |
<table width="300" height="200" cellspacing="1"
bgcolor="#999999">
<tr>
<td style="background:url(画像のファイル名) repeat-y center; background-color:#ffffff">
</td>
</tr>
</table>
上記のソース<tr>
<td style="background:url(画像のファイル名) repeat-y center; background-color:#ffffff">
</td>
</tr>
</table>
テーブル枠線の種類 かわいい点線 CSSボーダースタイル CSSボーダー CSSテーブル
★skip ページtop