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

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

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

このQ&Aに関連する最新のQ&A

A 回答 (5件)

 こんばんは。



 1枚目の写真の左右幅が650、2段目と3段目の写真の左右幅はすべて165という前提ですが、こんな感じでどうでしょう。2段目の右側の写真と3段目の左側の写真が少し重なる感じになります。

<table width="650" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="1段目の写真.jpg" alt="1段目の写真" width="650"></td>
</tr>
<tr>
<td>
<table width="650" border="0" cellpadding="0" cellspacing="0">
<tr><td width="165"><img src="2段目の左側の写真.jpg" alt="2段目の左側の写真.jpg" width="165" height="175"></td>
<td width="485"><img src="2段目の右側の写真.jpg" alt="2段目の右側の写真.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="3段目の左側の写真.jpg" alt="3段目の左側の写真.jpg" width="165"></td>
<td width="165" align="right"><img src="3段目の右側の写真.jpg" alt="3段目の右側の写真.jpg" width="165"></td>
</tr>
</table>
</td>
</tr>
</table>

 1段目の写真の左右幅>2段目と3段目の写真の左右幅の合計――の場合は、また変わって来ますが。
    • good
    • 0
この回答へのお礼

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

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

お礼日時:2001/10/23 11:26

どうも初めまして。

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

例えば、1段目が<td></td>1つ。2,3段目が<td></td>2つ。とか。。
<td></td>の数が揃っていないと、変な風に表示されます。
<td>を横にぶち抜きで、使いたいときは、
<td colspan="つなげたい数">(2つだったら「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で上下のスペース調整ができますよ。
では、頑張って下さいね。
    • good
    • 0
この回答へのお礼

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

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

お礼日時:2001/10/23 11:28

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

    • good
    • 0
この回答へのお礼

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

お礼日時:2001/10/23 09:53

そういう変則的なレイアウトをしたいのであれば、テーブルの入れ子をするしかないのでは?


文章で書くのは難しいのですが、

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

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

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

文章だとわかりづらいですね~。
ごめんなさい・・・。(^^;;
    • good
    • 0
この回答へのお礼

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

お礼日時:2001/10/23 09:52

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=650>


としてテーブルの幅と間隔を固定してみてはどうでしょう。
全ての段にHEIGHT(高さ)を指定するのも良いと思いますよ。
    • good
    • 0
この回答へのお礼

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

お礼日時:2001/10/23 09:49

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング

おすすめ情報