写真を綺麗に2つ並べたいのに,間があいてしまうのです,何が原因?

質問

こんにちは。
テーブルを使って,写真をレイアウトしているのですが,
1段目には横広の写真(650くらい)
2段目は小さな写真(165くらい)を2枚左に寄せて,
3段目は2段目と同じくらいの大きさの写真を2枚
それは右端によせて、というレイアウトをしたいのですが
どーしても中途半端なところに空間が空いたり,
思いっきり端っこによってしまったり(１段目の橋からはみ出るほど)
綺麗に出来ません。

ここで色々テーブルにつての質問を読んで,
試してみたのですが,上手く行かないのです。

良い方法がありましたら教えて下さい。
よろしくお願いします。

回答No.4

noname#21343 · ベストアンサー

こんばんは。

　１枚目の写真の左右幅が６５０、２段目と３段目の写真の左右幅はすべて１６５という前提ですが、こんな感じでどうでしょう。２段目の右側の写真と３段目の左側の写真が少し重なる感じになります。

<table width="650" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="１段目の写真.jpg" alt="１段目の写真" width="650"></td>
</tr>
<tr>
<td>
<table width="650" border="0" cellpadding="0" cellspacing="0">
<tr><td width="165"><img src="２段目の左側の写真.jpg" alt="２段目の左側の写真.jpg" width="165" height="175"></td>
<td width="485"><img src="２段目の右側の写真.jpg" alt="２段目の右側の写真.jpg" width="165"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="650" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="485" align="right"><img src="３段目の左側の写真.jpg" alt="３段目の左側の写真.jpg" width="165"></td>
<td width="165" align="right"><img src="３段目の右側の写真.jpg" alt="３段目の右側の写真.jpg" width="165"></td>
</tr>
</table>
</td>
</tr>
</table>

　１段目の写真の左右幅＞２段目と３段目の写真の左右幅の合計――の場合は、また変わって来ますが。

お礼

tenmayさんと、shiba1さんのタグと説明を参考にして
なんとか思っていたものに近い物が出来ました!
ありがとうございます！
お二人の説明の中に私が「?」って思っていたことの説明も
あったりして、大変に為になりました。
タグまで打っていただいて、ありがとうございます。

どちらの方にもマスターポイントを差し上げたいところですが,
そうもいかないので,速かった方の方にマスターポイントを
出させていただきます。

回答No.5

shiba1

どうも初めまして。全く見当違いな気がしますが。。補足です。
＞１段目の端からはみ出るほど
↑コレが気になります。もしかしたら、<td>の数がそれぞれの<tr>の中で
まちまち、になっているのでは？と感じました。

例えば、１段目が<td></td>１つ。２，３段目が<td></td>２つ。とか。。
<td></td>の数が揃っていないと、変な風に表示されます。
<td>を横にぶち抜きで、使いたいときは、
<td colspan="つなげたい数">（２つだったら「colspan="2"」とか。）
のように書き、本来あるはずの<td></td>は、書きません。
縦の場合は、colspanの代わりにrowspanを使います。
でも、narummiさんの場合、右寄せ、左寄せをテーブル全体に使いたいのですから

記入例：

<table cellspacing="0" cellpaddind="0" border="0">
<tr><td>
<img src="photo1.jpg" alt="1" width="650" height="200" border="0">
</td></tr>
<tr><td>
<img src="photo2a.jpg" alt="2a" width="165" height="100" border="0">
<img src="photo2b.jpg" alt="2b" width="165" height="100" border="0">
</td></tr>
<tr><td align="right">
<img src="photo3a.jpg" alt="3a" width="165" height="100" border="0">
<img src="photo3b.jpg" alt="3b" width="165" height="100" border="0">
</td></tr>
</table>

こんな感じではどうでしょうか？<table>を使ってレイアウトするときは、
border="1"とかにしておいて、後で、border="0"に変えるなどすれば、
分かり易いと思います。

それぞれの写真の間の空白の調節は、皆さんが書かれているように、
cellspacing : <table>の外枠と各<td>の距離。
cellpadding : <td>から中身までの距離。
で調節するのがイイでしょう。

ちなみに、<img src=～～ hspace="10" vspace="10">
など、hspaceで左右のスペース。vspaceで上下のスペース調整ができますよ。
では、頑張って下さいね。

お礼

shiba1さんとtenmayさんとのタグと説明を参考にして
なんとか思っていたものに近い物が出来ました!
ありがとうございます！
お二人の説明の中に私が「?」って思っていたことの説明も
あったりして、大変に為になりました。
タグまで打っていただいて、ありがとうございます。

どちらの方にもマスターポイントを差し上げたいところですが,
そうもいかないので,速かった方の方にマスターポイントを
出させていただきます。

回答No.3

future9

テーブルの属性以外でも、改行などでも変にスペースが空くことがありますよ。

お礼

え、それはどうしても空いちゃうものなんですか?

回答No.2

noname#1785

そういう変則的なレイアウトをしたいのであれば、テーブルの入れ子をするしかないのでは？
文章で書くのは難しいのですが、

1.1列×3段のテーブルを作成
2.1段目のTDタグの中に、1列×1段のテーブルを作り、写真を中央に配置。
3.2段目のTDタグの中に、2列×1段のテーブルを作り、写真を左に配置。
4.3段目のTDタグの中に、2列×1段のテーブルを作り、写真を右に配置。

という風に。
その際、1.のテーブルタグで高さと幅を指定してやると、うまく行くと思います。

ただ、テーブルタグは数が多くなるとページの読み込みが遅くなります。
写真が重いと余計に遅くなりますので、その点は配慮が必要かと。

文章だとわかりづらいですね～。
ごめんなさい・・・。（＾＾；；

お礼

入れ子にしようかなと思ったんですが,
やっぱり重たくなるのが難点かなあって思ってて。
でも,どーしても出来なかったら,やっぱり最後は
このやり方でやってみようと思います。
ありがとうございました。

回答No.1

yuizuian

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=650>
としてテーブルの幅と間隔を固定してみてはどうでしょう。
全ての段にHEIGHT（高さ）を指定するのも良いと思いますよ。

お礼

これはやってみたんですけど,上手くいかなったんですよ。
すぐ,回答を頂いていたんですね,ありがとうございます。