mamohoのHP作成講座

mamohoのHP作成講座

表の背景画像を指定してみよう

● 表の背景画像を指定しよう

テーブルに背景画像を指定してみましょう
使い方によっては テキストのフレーム枠をつくったり
面白い使い方ができますので ぜひ挑戦してみてください

では さっそくやってみましょう
考え方は前回のテーブルの背景色の指定と似てますのでそんなに難しくないと思います
背景画像には

背景1

この画像のURLはhttp://plaza.rakuten.co.jp/img/user/94/55/869455/9.gif です

これを例として使います
背景画像の指定には
<table background="画像のURL"> で 指定します

<table bodor="1" baclground="http://plaza.rakuten.co.jp/img/user/94/55/869455/9.gif" width="350">
 <tr>
  <td align="center">テーブル1</td>
  <td align="center">テーブル2</td>
  <td align="center">テーブル3</td>
 </tr>
 <tr>
  <td align="center">テーブル4</td>
  <td align="center">テーブル5</td>
  <td align="center">テーブル6</td>
 </tr>
</table>

すると 下のようになります

テーブル1 テーブル2 テーブル3
テーブル4
テーブル5 テーブル6

次は 上の横一列だけ 背景画像を指定してみます
<tr background="画像のURL"> で 横一列の背景画像を指定できます
ただし これは Netscapeのみ対応のようで Explorerでは 対応してないようです

<table bodor="1" width="350">
 <tr background="http://plaza.rakuten.co.jp/img/user/94/55/869455/9.gif">
  <td align="center">テーブル1</td>
  <td align="center">テーブル2</td>
  <td align="center">テーブル3</td>
 </tr>
 <tr>
  <td align="center">テーブル4</td>
  <td align="center">テーブル5</td>
  <td align="center">テーブル6</td>
 </tr>
</table>

すると 下のようになりますNetscape ではちゃんと見えますので 失敗ではないですよ(笑)

テーブル1 テーブル2 テーブル3
テーブル4
テーブル5 テーブル6

次は セルに背景画像を指定してみます
<th background="画像のURL"> <td background="画像のURL"> で
セルに背景画像を指定することができます

<table bodor="1" width="350">
 <tr>
  <td align="center" background="http://plaza.rakuten.co.jp/img/user/94/55/869455/9.gif">テーブル1</td>
  <td align="center">テーブル2</td>
  <td align="center" background="http://plaza.rakuten.co.jp/img/user/94/55/869455/9.gif">テーブル3</td>
 </tr>
 <tr>
  <td align="center">テーブル4</td>
  <td align="center" background="http://plaza.rakuten.co.jp/img/user/94/55/869455/9.gif">テーブル5</td>
  <td align="center">テーブル6</td>
 </tr>
</table>

すると 下のようになります

テーブル1 テーブル2 テーブル3
テーブル4
テーブル5 テーブル6


© Rakuten Group, Inc.
X
Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: