枠付き画像の表示
【10】 額縁の様な、枠付き画像表示 その1   

中級編   テーブルで設定して、画像を額縁のように表示する講座です。
額縁画像表示で、テーブルの枠線の数値を増やして表示する単純な方法からさまざま多様な方法があります が今回は、その1です。
テーブルの学習は、 第五章 表(テーブルを作る) で、理解して下さい
テーブルで、額縁のように画像の表示とサンプルタグ。
そのまま、貼り付けて表示させる画像を置き換え表示させて観よう。
境界線の属性値や、背景色・背景画像を色々変えて額縁の違いを試して下さい。
春の花素材集 1
テーブルに枠をつけたもっとも単純な表示方法です。
<table border="7"> <tr><td align="center">
<img src="
画像URL" alt="画像説明文" width="200" height="130" border="0">
</td></tr></table>
春の花素材集 1
テーブルに背景色を指定
<table width="280" height="180" bgcolor=" 背景色URL " align="center" border="7">
<tr> <td align="center">
<img src="
画像URL" alt="画像説明文" width="200" height="130" border="0"> </td></tr></table>
春の花素材集 1
テーブルに背景画像を指定
<table width="280" bgcolor="背景色URL" background="背景画像URL" border="7">
<tr> <td align="center" height="180">
<img src="
画像URL" alt="画像説明文" width="200" height="130" border="0"> </td></tr></table>
ここも参考に、額縁枠付き画像表示  未整理のためアップはしていますが、非公開のサイトです。
table 関連HTMLタグ  解 説 関連 URL  IMG 関連 TAG
<table> </table> 要素 テーブル全体の指定 枠の太さ、枠サイズ、表の背景色、背景画など、表全体に関わる部分の指定を行う。 <table>  <th>  <tr>  <td>
<tr>  </tr> 要素 行を指定するタグ  <table> に囲まれた範囲内で使います <img> <table> <th>  <tr>  <td>
<td> </td> 要素 セルを指定するタグ  <tr> に囲まれた範囲内で使います 枠サイズや背景色を指定出来 行に複数のセルを設定する事が出来る。 <table>  <tr>
width=" " 属性 画像を配置する 画像サイズ横幅 表の横幅 <img> <table> <th>  <tr>  <td>
height=" " 属性 画像を配置する 画像縦サイズ幅 表の縦サイズ img;  table  <th>  <tr>  <td>
border=" " 属性 画像境界線 画像枠 表の枠線の太さ。 <link>  <th>  <img> <table>
cellPadding="" 属性 テーブル枠との間隔巾  セル内の文字と枠線とのマージンを指定できます。 <table>

閑話  上記サンプル画素材などの入手先
上記の花素材は、いずれも同じ管理人が素材集をアップしている春の花素材のものです。 背景素材数だけでも、半端でなくジャンル別総数 約1000点以上を揃えており、なおペ−ジでの文字表示にも留意しています。
フリーですから、自由に使用して下さい 使用に際して掲示板かメールでも頂けると作成の励みにもなりますので宜しくお願いします。 ふりーなホームページ素材集 から