ブラウザに合わせて伸縮する画像テーブル

質問

手打ちでHPを作成している者です。
ブラウザに合わせて伸縮するようにテーブルを作りたいと思っています。

普通のテーブルなら％で伸縮させられたのですが、8つの画像を使う角の丸いテーブル等、画像で作ったテーブルの伸縮がうまくいきません。
画像がテーブルの表示領域いっぱいに連なり、模様のようになってしまいます。

そしてその中にインラインフレームでコンテンツを表示させたいと思っています。
ブラウザに合わせてテーブルも、その中のインラインフレームも同じように可変させたいのですが、どうしたらよいのでしょうか？

お詳しい方、ご回答よろしくお願い致します。

回答No.2

goldfox · ベストアンサー

＞四方の画像URLはどこに書いたらいいのでしょうか？
もちろん、<img>タグに指定してください。
<img>の書き方は分かりますよね？
;"><img src="画像アドレス" alt="左上" style="width:画像幅; height:画像高さ;"></

＞altの部分も文字化けしてしまうのですが、ここは必須でしょうか？
そこだけが文字化けですか？　他の日本語も文字化けするなら問題ないと思いますが…。
（文字コード指定の問題だと思います）
<img>にalt属性は必須です。

書いてないですけど、画像が上手く表示できないだけで、
伸縮は問題なくできますか？

お礼

迅速なご回答どうも有り難うございます！

全てイメージ通りに出来ました！
本当に嬉しいです、有難うございます！

文字化けですが、間違った書き方をしたのでそういう問題が起きてしまっただけのようです。
全て上手くいった後には、文字化けなんてしていませんでした；すみません…
補足では言葉が足らず申し訳ありませんでした！
伸縮は問題なく出来ていました。中にインラインフレームも入れてみたのですが、きちんと一緒に伸び縮みしています。嬉しいです！

本当にどうも有り難うございました！
検索してもなかなかページが見つからず、時間が過ぎて行くだけで困っていました。感謝致します！

回答No.1

goldfox

角4隅のセル幅は固定しましょう。
伸縮する枠線部分に当たるセルの、上下のセルの横幅と
左右のセルの高さを％で伸縮するようにします。
ただ、高さを％指定は、ブラウザによっては反映されないので、お勧めできません。
インラインフレームを入れるなら、高さは固定したほうが見やすいとも思います。
<table cellspacing=0 cellpadding=0 style="width:100%;height:100%;border:none;">
<tr>
<td style="width:画像幅; height:画像高さ;"><img alt="左上" style="width:画像幅; height:画像高さ;"></td>
<td style="background-image:url(上枠線画像);"></td>
<td style="width:画像幅; height:画像高さ;"><img alt="右上" style="width:画像幅; height:画像高さ;"></td>
</tr><tr>
<td style="background-image:url(左枠線画像);"></td>
<td style="width:100%; height:100%;">インラインフレーム</td>
<td style="background-image:url(右枠線画像);"></td>
</tr><tr>
<td style="width:画像幅; height:画像高さ;"><img alt="左下" style="width:画像幅; height:画像高さ;"></td>
<td style="background-image:url(下枠線画像);"></td>
<td style="width:画像幅; height:画像高さ;"><img alt="右下" style="width:画像幅; height:画像高さ;"></td>
</tr>
</table>

補足

ご回答どうも有り難うございます！

試してみたのですが、すみません、上手くいきません…。
四方の画像URLはどこに書いたらいいのでしょうか？
一応3行目の色んな場所に入れてみたのですが、きれいな四角には繋がりませんでした；
altの部分も文字化けしてしまうのですが、ここは必須でしょうか？