こんにちは。
テーブルを使って,写真をレイアウトしているのですが,
1段目には横広の写真(650くらい)
2段目は小さな写真(165くらい)を2枚左に寄せて,
3段目は2段目と同じくらいの大きさの写真を2枚
それは右端によせて、というレイアウトをしたいのですが
どーしても中途半端なところに空間が空いたり,
思いっきり端っこによってしまったり(1段目の橋からはみ出るほど)
綺麗に出来ません。
ここで色々テーブルにつての質問を読んで,
試してみたのですが,上手く行かないのです。
良い方法がありましたら教えて下さい。
よろしくお願いします。
No.2
- 回答日時:
そういう変則的なレイアウトをしたいのであれば、テーブルの入れ子をするしかないのでは?
文章で書くのは難しいのですが、
1.1列×3段のテーブルを作成
2.1段目のTDタグの中に、1列×1段のテーブルを作り、写真を中央に配置。
3.2段目のTDタグの中に、2列×1段のテーブルを作り、写真を左に配置。
4.3段目のTDタグの中に、2列×1段のテーブルを作り、写真を右に配置。
という風に。
その際、1.のテーブルタグで高さと幅を指定してやると、うまく行くと思います。
ただ、テーブルタグは数が多くなるとページの読み込みが遅くなります。
写真が重いと余計に遅くなりますので、その点は配慮が必要かと。
文章だとわかりづらいですね~。
ごめんなさい・・・。(^^;;
入れ子にしようかなと思ったんですが,
やっぱり重たくなるのが難点かなあって思ってて。
でも,どーしても出来なかったら,やっぱり最後は
このやり方でやってみようと思います。
ありがとうございました。
No.3
- 回答日時:
テーブルの属性以外でも、改行などでも変にスペースが空くことがありますよ。
No.4ベストアンサー
- 回答日時:
こんばんは。
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段目の写真の左右幅の合計――の場合は、また変わって来ますが。
tenmayさんと、shiba1さんのタグと説明を参考にして
なんとか思っていたものに近い物が出来ました!
ありがとうございます!
お二人の説明の中に私が「?」って思っていたことの説明も
あったりして、大変に為になりました。
タグまで打っていただいて、ありがとうございます。
どちらの方にもマスターポイントを差し上げたいところですが,
そうもいかないので,速かった方の方にマスターポイントを
出させていただきます。
No.5
- 回答日時:
どうも初めまして。
全く見当違いな気がしますが。。補足です。>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で上下のスペース調整ができますよ。
では、頑張って下さいね。
shiba1さんとtenmayさんとのタグと説明を参考にして
なんとか思っていたものに近い物が出来ました!
ありがとうございます!
お二人の説明の中に私が「?」って思っていたことの説明も
あったりして、大変に為になりました。
タグまで打っていただいて、ありがとうございます。
どちらの方にもマスターポイントを差し上げたいところですが,
そうもいかないので,速かった方の方にマスターポイントを
出させていただきます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- 宇宙科学・天文学・天気 7月2日夜、城ヶ島へ星空撮影しに行きました。 今回は、明るいレンズだけ借りて、赤道儀を使わず撮影し、 1 2022/07/03 23:34
- Word(ワード) 写真3枚をA4に貼り付けたい 5 2023/07/03 14:36
- 九州・沖縄 大分県民(または出身者)のかたにふたつほど教えてほしいことがあります 1 2022/05/11 20:20
- 出会い・合コン 可愛くてモテる女の子に質問です。 可愛くない人に聞いてもあまり参考にならないので、可愛くない人と男性 2 2022/05/10 00:06
- 出会い・合コン 可愛くてモテる女の子に質問です。 可愛くない人に聞いてもあまり参考にならないので、可愛くない人と男性 3 2022/05/12 23:28
- ビデオカード・サウンドカード グラボの16ピンの端子を 8ピン2つしか空いていない電源ケーブルに挿すには 2 2023/05/04 15:04
- 着物・浴衣・水着 着物で迷っています!! 友人の結婚式、 自分の結婚関係、 将来の子供行事に 使える着物が欲しくてとて 4 2022/07/30 21:02
- 片思い・告白 私が今好きな男性(21歳同い年)のInstagram投稿についてです。 インスタの投稿、前までは10 3 2023/03/11 21:01
- その他(行事・イベント) 先週 0 2023/03/20 05:52
- ノートパソコン PC内写真の切り取り&貼り付けの過程で写真が一部消えたかも? 1 2022/12/09 01:18
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
goo は、放置?
-
htmlの文字が縦書きになる
-
スマホ(android)のタッチパネ...
-
css初心者 フレックスボックス...
-
メモ帳の段落の揃え方
-
CSS、Bootstrapについて contai...
-
テーブルの行を折りたたみたい...
-
WEBページを強制的に横画面で見...
-
WEBサイト 画像の直接リンクに...
-
CSSについて教えてください。 ...
-
列のどこをクリックしてもソー...
-
ボタンが押されたらWebページの...
-
アコーディオンメニューが思う...
-
テーブルタグのセルの幅の一部...
-
iPhoneで HTMLファイルを閲覧
-
角丸画像の背景色を透明にした...
-
htmlソース文の 各行 改行位置...
-
ホームページのURLをコピー...
-
pythonのコードについてご教示...
-
すいません HTMLです この画像...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlで改行タグを入れていない...
-
テーブルが横に長くなってしまう
-
テーブルが一行下がる・・・
-
DreameverMXで縦線、横線を無限...
-
HTMLでテーブル幅を固定しても...
-
アクセスログの「HEAD」と...
-
大きくなった文字を元に戻すには?
-
数値Lについて
-
隠しページの探し方
-
ドラッグすると見える文字
-
アドレスバーへの直接入力を禁...
-
グラデーションの仕方
-
ローカルに保存された ASP を I...
-
ヘッダーを共通化した場合のSEO...
-
トップページの入れ替えを教え...
-
BASIC認証を複数設定するには?
-
エクセルから作ったホームペー...
-
ホームページビルダーのトップ...
-
パソコンのメモ帳のことで質問
-
HPのソースをそのまま貼り付け...
おすすめ情報