表の背景に画像を表示する

[統計] HTMLからXHTMLへの移行を進めていますか?


<table background=""><tr background=""><td background="">

ブラウザ
Internet Explorer Netscape Firefox Opera
タイプ
(独自拡張)

tableタグ、trタグ、tdタグbackground="" を追加すると、表の背景に画像を表示できます。


表全体の背景画像を指定する場合Internet ExplorerNetscapeFirefoxOpera

<table background="back.gif">

tableタグbackground="" を追加します。

行単位で背景画像を指定する場合NetscapeFirefoxOpera

<tr background="back.gif">

trタグbackground="" を追加します。(IEでは対応していません)

セル単位で背景画像を指定する場合Internet ExplorerNetscapeFirefoxOpera

<td background="back.gif">

tdタグbackground="" を追加します。(thタグでも指定可能です)


background="" 表示する画像のファイル名を指定します

画像ファイルの指定については、パスの指定方法も参考にしてください。

メモ

この指定内容はスタイルシートで代替することができます。指定方法の詳細は「関連ページ」をご覧ください。


使用例

背景サンプル この画像を背景に指定しています。


表全体の背景に画像を表示する場合

<table border="1" background="image/back.gif">
<tr>
<td>WebディレクターA</td>
<td>WebディレクターB</td>
<td>WebディレクターC</td>
</tr>
<tr>
<td>WebデザイナーA</td>
<td>WebデザイナーB</td>
<td>WebデザイナーC</td>
</tr>
<tr>
<td>WebプログラマーA</td>
<td>WebプログラマーB</td>
<td>WebプログラマーC</td>
</tr>
</table>

これをブラウザで見ると次のように表示されます

WebディレクターA WebディレクターB WebディレクターC
WebデザイナーA WebデザイナーB WebデザイナーC
WebプログラマーA WebプログラマーB WebプログラマーC

2行目の背景に画像を表示する場合

<table border="1">
<tr>
<td>WebディレクターA</td>
<td>WebディレクターB</td>
<td>WebディレクターC</td>
</tr>
<tr background="image/back.gif">
<td>WebデザイナーA</td>
<td>WebデザイナーB</td>
<td>WebデザイナーC</td>
</tr>
<tr>
<td>WebプログラマーA</td>
<td>WebプログラマーB</td>
<td>WebプログラマーC</td>
</tr>
</table>

これをブラウザで見ると次のように表示されます

WebディレクターA WebディレクターB WebディレクターC
WebデザイナーA WebデザイナーB WebデザイナーC
WebプログラマーA WebプログラマーB WebプログラマーC

中央の列に背景の画像を表示する場合

<table border="1">
<tr>
<td>WebディレクターA</td>
<td background="image/back.gif">WebディレクターB</td>
<td>WebディレクターC</td>
</tr>
<tr>
<td>WebデザイナーA</td>
<td background="image/back.gif">WebデザイナーB</td>
<td>WebデザイナーC</td>
</tr>
<tr>
<td>WebプログラマーA</td>
<td background="image/back.gif">WebプログラマーB</td>
<td>WebプログラマーC</td>
</tr>
</table>

これをブラウザで見ると次のように表示されます

WebディレクターA WebディレクターB WebディレクターC
WebデザイナーA WebデザイナーB WebデザイナーC
WebプログラマーA WebプログラマーB WebプログラマーC


[特集] レンタルサーバー比較 & サーバー選びのチェックポイント