TOPページ >  テーブルを作成する > テーブルの背景画像を表示する

テーブルの背景画像を表示する

テーブル(ホームページやブログなどのウェブサイトで表示する表)に、背景画像を指定することができます。HTMLソースのTABLEタグ内にBACKGROUND属性で、背景画像のURLを指定します。テーブル全体に、セルごとに、または行ごとになどさまざまな指定が可能です。

<タグ名 background="背景画像URL"></タグ名>
  • タグ名: table タグを指定すると そのテーブル全体に、tr タグを指定すると その列全体に、th または td タグを指定すると そのセル単体に背景画像を指定することができます。
  • 背景画像URL:絶対パスまたは相対パスで指定できます。

サンプルソースです。

■サンプル1:テーブル全体に背景画像を指定する。次のhtml ソースは、table タグで このテーブル全体に背景画像を指定しています。

<table background="./sample/sun.gif" border="1" width="220" height="165">
<tr><td>この</td><td>テーブル</td><td>は</td></tr>
<tr><td>全体に</td><td>背景画像を</td><td>指定</td></tr>
<tr><td>して</td><td>いま</td><td>す。</td></tr>
</table>

このソースを表示させると次のようになります。

このテーブル
全体に背景画像を指定
しています。

■サンプル2:行ごと、セルごとに背景画像を指定する:次のhtml ソースは 1行目のセル全体と、2行目の真ん中のセルと、3行目の1番右のセルだけ背景画像を指定しています。

<table border="1" width="220" height="165">
<tr background="./sample/sun.gif">
<td>この列は</td><td>背景画像を</td><td>指定しています</td>
</tr>
<tr><td>なし</td>
<td background="./sample/sun.gif">このセルは背景画像を指定しています</td>
<td>なし</td></tr>
<tr><td>なし</td><td>なし</td>
<td background="./sample/sun.gif">このセルは背景画像を指定しています</td></tr>
</table>

このソースを表示させると次のようになります。

この列は背景画像を指定しています
なしこのセルは背景画像を指定していますなし
なしなしこのセルは背景画像を指定しています

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
テーブルの余白などのスタイルを指定する
テーブル自動作成フォーム2
セル内の文字/画像の縦方向表示位置を指定する
セル内の文字/画像の横方向表示位置を指定する
セル内の余白を指定する
セルとセルの間隔を指定する
テーブルの背景画像を表示する
テーブルの背景色を指定する
テーブル枠の色を指定する
テーブルに枠をつける
テーブルの左右に文字/画像を回り込ませる
テーブルに表題をつける
セルのサイズを指定する
テーブルのサイズを指定する
テーブルに画像やボタンを表示する
横にまたがるセルを作る
縦にまたがるセルを作る
テーブルを作成する
テーブル自動作成フォーム
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス