MB-Support

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

表(テーブル)の中に画像を表示する方法

 テーブルを利用する事で、ある程度の法則に縛られるものの、画像やテキストをレイアウトする事が可能です。しかし、サイズを特定するために、要素内の全ての部品がダウンロードされるまで表示できない場合もあります。


テーブルの <td> 〜 </td> 間に <img src="相対パス"> を挿入します。 背景画像として挿入する時と異なり、<td> 〜 </td> 内にしかテキストや画像を挿入できません。



HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="1">
  <tr>
   <td><img src="画像の相対/絶対パス" width="50" height="38"></td>
  </tr>
 </table> </body> </html>

ブラウザ


border="0"で枠線を無くてレイアウトする

テーブルのボーダーを消すことで、画像をレイアウトする方法です。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="0">
  <tr>
   <td width="150"><img src="画像アドレス"></td>
   <td width="150"></td>
   <td width="150"><img src="画像アドレス"></td>
   <td width="150"></td>
  </tr>
  <tr>
   <td width="150"></td>
   <td width="150"><img src="画像アドレス"></td>
   <td width="150"></td>
   <td width="150"><img src="画像アドレス"></td>
  </tr>
 </table> </body> </html>

ブラウザ

ボーダーを表示した場合は以下。


テーブルを利用する事で、ある程度の法則に縛られるものの、画像やテキストをレイアウトする事が可能です。 しかし、考慮するべき事もあります。 テーブルは、その要素内の全ての部品をダウンロードしてから表示するため、テーブル内のデータ量によっては、表示されるまで時間がかかります。 画像などは必ず width と height を指定して、テーブルやセルの width も指定した方が、読み込みが早くなるでしょう。 サイズが確定すれば、テーブルの内の画像の読み込みが完了しなくても表示されます。




戻る 一覧表示 次へ


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

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

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