Tableとdivタグで、画像のようなレイアウトを作りたいのですが。

黒い線を二本入れた簡単なレイアウトなのですが、

どのブラウザーで見ても、(どの画面の大きさで見ても)

同じような形になるように、tableとdivでレイアウトするにはどうしたらよいでしょうか。

metaタグなど余計なものは書かなくてもかまいませんのでよろしくおねがいします。

(後パーセンテージもいくつでも構いません、適当に書きました)

tableで書いた場合と、divで書いた場合と教えてください。

縦横ともに長さ100%で表示したいです。

パーセンテージを使うとかける気がするのですが、忘れてしまいました。

ぜひよろしくお願いします。

「Tableとdivタグで、レイアウト」の質問画像

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

A 回答 (2件)

こんにちは


大まかですがこんな感じでしょうか。

Htmlタグ

<body>
<div id="top">
<div id="top-left">
<!--top-left--></div>
<div id="top-space">
<!--top-space--></div>
<div id="top-right">
<!--top-right--></div>
<!-- top --></div>
<div id="bottom">
<div id="bottom-left">
<!--bottom-left--></div>
<div id="bottom-space">
<!--bottom-space--></div>
<div id="bottom-right">
<!--bottom-right--></div>
<!--bottom--></div>
</body>

CSS


* {
margin: 0px;
padding: 0px;
}
body, html {
margin: 2% 0%;
padding: 0px;
width: 100%;
height: 96%;
background-color: black;
}
#wrapper{
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
#top {
margin: 0px;
padding: 0px;
height: 70%;
}
#top-left {
margin: 0px;
height: 90%;
width: 65%;
float: left;
background-color: white;
}
#top-space {
margin: 0px;
width: 5%;
height: 100%;
float: left;
}
#top-right {
margin: 0px;
height: 90%;
width: 30%;
float: left;
padding-bottom: 0px;
background-color: white;
}
#bottom {
margin: 0px;
padding: 0px;
height: 28%;
}
#bottom-left {
margin: 0px;
height: 100%;
width: 65%;
float: left;
background-color: white;
}
#bottom-space {
margin: 0px;
width: 5%;
height: 100%;
float: left;
}
#bottom-right {
margin: 0px;
height: 100%;
width: 30%;
float: left;
background-color: white;
}


%は適当ですのでお好みで。
    • good
    • 0

黒い枠線がご提示のもののように太いものであれば、



テーブル自体は border:0 にしておいて、黒い枠線部分はテーブルのセルにしてしまい(幅・高さを設定)、その部分を背景色黒で表示すると言う方法ではいかがでしょうか?
幅・高さとも(黒の枠線部分を含んで)合計100%になるようにしておけばよろしいかと。
    • good
    • 0

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


人気Q&Aランキング