このテーブルをCSSで書くとどうなりますか？

解決済

質問者：beginner_w
質問日時：2009/05/25 02:50
回答数：4件

画像を参照願えますでしょうか。
左側100pxの右側は400pxで合計幅500pxあります。
（右側1行左側3行です。）

これをテーブルレイアウトではなく、divとcssで書くとどんなhtmlになりますか？

現在段組を色々やってますが、自問自答してもこのパターンだけが解決できないので・・・

同じようにＨＴＭＬに興味ある方や詳しい方がいらっしゃいましたらご教授願います。

お答えの際にはＨＴＭＬソースを希望します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

No.1

回答者： ryupyon
回答日時：2009/05/25 03:37

こんな感じでしょうか？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title></title>
<style type="text/css">

</style>
</head>
<body>
<table border="1">
<tr><td rowspan="3" id="a">あいうえお</td><td id="b">かきくけこ</td></tr>
<tr><td>さしすせそ</td></tr>
<tr><td>たちつてと</td></tr>
</table>

</body>
</html>

この回答への補足

説明がヘタですいません。

div+cssでお願いします。

要するにテーブルレイアウトのタグは使用しないで書くということです。

補足日時：2009/05/25 13:26

通報する

- 0
- 件

通報する

No.2ベストアンサー

回答者： amuamu00
回答日時：2009/05/25 03:44

padding等の細かい点は省きます。

【左側のボックス】
　　▼css
　　　.left{
　　　width:100px;
　　　float:left;
　　　}
【右側のボックス】
　　▼css
　　　.right{
　　　width:400px;
　　　float:right;
　　　}
【左右を囲うもの】
　　▼css
　　　.main{
　　　width:500px;
　　　margin:0px auto;
　　　}
【html】
　　<div class="main">
<div class="left">~~~~~</div>
　　<div class="right">~~~~~</div>
　　<div class="right">~~~~~</div>
　　<div class="right">~~~~~</div>
</div>

上記では駄目ですか？
検証はしていません。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます＾＾

通報する

お礼日時：2009/05/25 13:26

No.3

回答者： reverie013
回答日時：2009/05/25 14:59

<div>

　<div>左</div>
　<div>右上</div>
　<div>右中</div>
　<div>右下</div>
　<div>clearfix的なもの</div>
</div>
というHTMLを仮定して、
全体を囲っているdivにwidth:500px;、左にwidth:100pxですね。
左にfloat:left;、clearfixにclear:left;
全体を囲うdivにheightを指定して、左にheight:100%;
clearfixには、height:0;margin:0;font-size:0;line-height:0;visibility:hidden;とあらゆる手を使って存在をなくす。

とかって感じで如何でしょう。
右と左の高さを合わせるにはこれもきっちりheightをサイズ指定して、
あとはoverflow:auto;とでもしておけば何とかなるんじゃないでしょうか。

- 0
- 件

通報する

この回答へのお礼

よくわかりません・・・

わたしの頭が悪いんですね＞＜

でもありがとうございます＾－＾

通報する

お礼日時：2009/05/26 04:16

No.4

回答者： k0021
回答日時：2009/05/25 15:26

ＩＥなら

<STYLE TYPE="text/css">
</STYLE></HEAD><BODY><div class="main">
<div class="left">aaaaaa</div>
<div class="right xl05">bbbbbbbbbbbbb</div>
<div class="right">ccccccccccccccc</div>
<div class="right">dddddddddddddddd</div>
</div>
</BODY></HTML>

Firefox・Safariの場合500では、floatが利かないので503にしています

height:3.6em;を指定していますが、FirefoxとSafari個々にCSSを指定が必要ですので。
Firefoxの場合は、height:3.8em;？？
Safariの場合は、height:3em;？？

rowspan="3"等、セルの結合する場合、table指定で作成した方が良いと思いますが