HTML index
ホームページ作成ガイド

ステップアップ＆テクニック - ホームページ作成ガイド
HTML&CSS Web制作リファレンス
-ホームページ作成を学ぶ・調べる-

< HOME / ホームページ作成ガイド / 画像、表、IFRAMEを並べてみる
画像、表、IFRAMEを並べてみる
テーブルタグを使用して、画像や表、インラインフレームなどを横に2つ並べてみます。

テーブル全体の幅やセルの幅を指定することで、表示される位置（間隔）をコントロールできるようになります。

※テーブルタグについての詳細は、「テーブルタグ」カテゴリーをご覧ください。

※「テーブルタグの使用について」もご覧ください。
　デフォルトでは．．．
通常、表の前後には自動的に改行が入ってしまうので、そのままでは横に並べることができません。また、画像やインラインフレームを並べようとすると、ぴったりくっついた感じで並んでしまいます。

■表を並べようとした場合

<TABLE BORDER="1" CELLSPACING="2" CELLPADDING="2">
<TR>
<TD>サーバーA</TD>
<TD>サーバーB</TD>
</TR>
</TABLE>

<TABLE BORDER="1" CELLSPACING="2" CELLPADDING="2">
<TR>
<TD>サーバーC</TD>
<TD>サーバーD</TD>
</TR>
</TABLE>

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

サーバーA サーバーB
サーバーC サーバーD


■画像を並べた場合

<IMG SRC="image/img1.gif" ALT="sample1" WIDTH="100" HEIGHT="100">
<IMG SRC="image/img2.gif" ALT="sample2" WIDTH="100" HEIGHT="100">

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

sample1 sample2


■インラインフレームを並べた場合

<IFRAME SRC="isample_a.html" WIDTH="150" HEIGHT="50"></IFRAME>
<IFRAME SRC="isample_b.html" WIDTH="150" HEIGHT="50"></IFRAME>

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


デフォルトでは上記のような感じで表示されますが、表を横に並べたい場合や、間隔をもっと離して並べたいという場合には、テーブルタグを使って次のように指定するとうまくいきます。

　並べ方
仕組みは簡単です。2つのセルを持ったテーブルを1組つくり、それぞれのセルの中に内容（画像、表、IFRAME）を入れるだけです。枠線を消すことで、テーブルを意識させずに配置を行うことができます。

例えば、画像と画像の間隔を離して横に並べたい場合には、次のように指定します。

<TABLE BORDER="2" WIDTH="100%" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD>

<IMG SRC="image/img1.gif" ALT="sample1" WIDTH="100" HEIGHT="100">

</TD>
<TD>

<IMG SRC="image/img2.gif" ALT="sample2" WIDTH="100" HEIGHT="100">

</TD>
</TR>
</TABLE>

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

sample1 sample2


上記の例では、わかりやすくするために枠線を表示していますが、BORDER="" に 0 を指定して枠線を消せば、次のようにテーブルを意識させずに配置することができます。

sample1 sample2


上記の例ではテーブルの幅を 100% に指定しているので、ブラウザの幅を変更すると画像の位置や間隔も変化してしまいます。

画像の位置を固定したい場合は、TABLEタグやTDタグの WIDTH="" をピクセルで指定します。

<TABLE BORDER="0" WIDTH="400" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD WIDTH="200">

<IMG SRC="image/img1.gif" ALT="sample1" WIDTH="100" HEIGHT="100">

</TD>
<TD WIDTH="200">

<IMG SRC="image/img2.gif" ALT="sample2" WIDTH="100" HEIGHT="100">

</TD>
</TR>
</TABLE>

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

sample1 sample2


WIDTH="" の値を変えることで、画像と画像の間隔を調節することができます。

例えば左のセルを 250 、右のセルを 150 に変更すると、画像の位置は次のように変化します。

sample1 sample2


　画像を並べた場合の例
画像を並べた場合のサンプルです。

<TABLE BORDER="0" WIDTH="400" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD WIDTH="200">

<IMG SRC="image/img3.gif" ALT="sample3" WIDTH="100" HEIGHT="100">

</TD>
<TD WIDTH="200">

<IMG SRC="image/img4.gif" ALT="sample4" WIDTH="100" HEIGHT="100">

</TD>
</TR>
</TABLE>

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

sample3 sample4

※わかりやすくするために、枠線を表示させてみました。

sample3 sample4


　インラインフレームを並べた場合の例
インラインフレームを並べた場合のサンプルです。

<TABLE BORDER="0" WIDTH="500" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD WIDTH="250">

<IFRAME SRC="isample_a.html" WIDTH="150" HEIGHT="50"></IFRAME>

</TD>
<TD WIDTH="250">

<IFRAME SRC="isample_b.html" WIDTH="150" HEIGHT="50"></IFRAME>

</TD>
</TR>
</TABLE>

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


※わかりやすくするために、枠線を表示させてみました。



　表を並べた場合の例
表を並べた場合のサンプルです。

<TABLE BORDER="0" WIDTH="500" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD WIDTH="250">

<TABLE BORDER="2" CELLSPACING="2" CELLPADDING="2">
<TR>
<TD>HP作成A</TD>
<TD>HP作成B</TD>
</TR>
<TR>
<TD>HP作成C</TD>
<TD>HP作成D</TD>
</TR>
</TABLE>

</TD>
<TD WIDTH="250">

<TABLE BORDER="2" CELLSPACING="2" CELLPADDING="2">
<TR>
<TD>HP作成E</TD>
<TD>HP作成F</TD>
</TR>
<TR>
<TD>HP作成G</TD>
<TD>HP作成H</TD>
</TR>
</TABLE>

</TD>
</TR>
</TABLE>

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

HP作成A HP作成B
HP作成C HP作成D
HP作成E HP作成F
HP作成G HP作成H

※わかりやすくするために、枠線を表示させてみました。

HP作成A HP作成B
HP作成C HP作成D
HP作成E HP作成F
HP作成G HP作成H


表と表をぴったりくっつけて並べたい場合は、WIDTH="" の指定を削除します。

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD>

<TABLE BORDER="2" CELLSPACING="2" CELLPADDING="2">
<TR>
<TD>WebデザインA</TD>
<TD>WebデザインB</TD>
</TR>
<TR>
<TD>WebデザインC</TD>
<TD>WebデザインD</TD>
</TR>
</TABLE>

</TD>
<TD>

<TABLE BORDER="2" CELLSPACING="2" CELLPADDING="2">
<TR>
<TD>WebデザインE</TD>
<TD>WebデザインF</TD>
</TR>
<TR>
<TD>WebデザインG</TD>
<TD>WebデザインH</TD>
</TR>
</TABLE>

</TD>
</TR>
</TABLE>

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

WebデザインA WebデザインB
WebデザインC WebデザインD
WebデザインE WebデザインF
WebデザインG WebデザインH


ホームページ作成ガイドTOP

HTMLタグ｜スタイルシート｜JavaScript｜Webツール｜カラーチャート｜テンプレート｜
< HOME PageTop▲

inserted by FC2 system