ホームページでテーブル内に背景画像を並べるには？

テーブル内に背景画像を並べる

テーブル内に背景画像を縦横に並べる

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>

背景画像をテーブルの下に並べる

背景画像をテーブルの下に並べる

変えるところ→黄色の部分 上記のソース
<table width="300" height="200" cellspacing="1" bgcolor="#999999"> <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>

背景画像をテーブルの左側に並べる

背景画像をテーブルの左側に並べる

変えるところ→黄色の部分 上記のソース
<table width="300" height="200" cellspacing="1" bgcolor="#999999"> <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>

背景画像をテーブルの中央縦に並べる

背景画像をテーブルの中央縦に並べる

変えるところ→黄色の部分 上記のソース
<table width="300" height="200" cellspacing="1" bgcolor="#999999"> <tr> <td style="background:url(画像のファイル名) repeat-y center; background-color:#ffffff"> </td> </tr> </table>



テーブル枠線の種類 かわいい点線 CSSボーダースタイル CSSボーダー CSSテーブル




★skip ページtop