MB-Support

パソコン初心者のサポートページ

表(テーブル)の背景に画像を指定する方法 table background

 テーブルの背景画像の指定は、テーブル全体と各セルごとに全て異なる画像を指定できます。やり方は、ページ全体の背景画像を指定する方法と同じで、table 、td タグに background を挿入します。


表 ( テーブル ) に画像を指定する場合は、<table> タグに background="画像の絶対/相対パス" を挿入します。指定が無い場合は、背景が透明になります。つまり、ページ全体、例えば body などで背景画像を設定している場合は、その画像が表全体にも反映されます。もし、ページ背景画像をテーブルにまで表示させたくない場合は、 表(テーブル)の背景色を指定する方法 を参照して、テーブルの背景色を白などに設定する必要があります。


HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="1" background="画像の絶対/相対パス">
  <tr>
   <td>ホームズの思い出</td> 
   <td>ホームズの事件簿</td>
  </tr>
 </table>
</body>
</html>

ブラウザ


セルに壁紙を指定する background="絶対/画像の相対パス"

各セルの背景画像を指定する方法は、<td> タグに background="絶対/画像の相対パス" を挿入します。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="1">
  <tr>
   <td background="画像の絶対/相対パス">ホームズの思い出</td> 
   <td>ホームズの事件簿</td>
  </tr>
 </table>
</body>
</html>

ブラウザ


HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="1">
  <tr>
   <td background="画像の絶対/相対パス">ホームズの思い出</td> 
   <td background="画像の絶対/相対パス">ホームズの事件簿</td>
  </tr>
 </table>
</body>
</html>

ブラウザ

さらに table の背景にも画像を設定した場合

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="1" background="画像の絶対/相対パス">
  <tr>
   <td background="画像の絶対/相対パス">ホームズの思い出</td> 
   <td background="画像の絶対/相対パス">ホームズの事件簿</td>
  </tr>
 </table>
</body>
</html>

ブラウザ


グラデーション画像を作成する

ホームページの背景画像や、チャプターに使う背景画像を WEB 上で制作できるサイトを見つけました。 単純に色を付けるだけならば画像は必要ありませんが、透明度を付けたり、グラデーションを付けるとなると、何らかしらのアプリケーションを利用する必要があります。

Background Image Maker

利用方法は以下。

グラデーションの背景画像を WEB上で制作できるサイト Background Image Maker



右は、上のサイトで作成してダウンロードした幅 10 px  、高さ 30 px の画像です。これをテーブルで利用した場合のサンプルが以下です。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="0" width="400" background="画像の絶対/相対パス">
  <tr>
   <td>ホームズの思い出</td> 
  </tr>
 </table>
</body>
</html>

ブラウザ


背景に指定した画像は、縦横繰り返して表示されるので、幅 10 px の画像でもグラデーションが右に伸びます。 しかし、縦も繰り返されるので、高さを調節しないと見苦しい背景となりえます。 背景画像の指定方法は、ページ全体で指定する方法と同じです。 背景画像の繰り返しを制御するには、スタイルシートを利用しする必要があります。




戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項