ＣＳＳスタイルシートでテーブルをつくりたいです。

質問

----------------------------
| | |
----------------------------
| | |
| | |
| | |
----------------------------

このようなテーブルをスタイルシートでつくりたいのですが、できるのでしょうか？外部ファイルにしてbod内に指定という形でやりたいのですが、
どうぞよろしくお願いいたしますm(_ _)m

回答No.3

anzam · ベストアンサー

yambejpさんが言うようにレイアウト以外にブロック構成を使うなら本来はTABLEが正解でTABLEをCSSでと言う発想は間違いです。
とまぁ意地悪はさておき…
質問内容の図が崩れているので回答に困りますが
┏━┳━┓
┃□┃□┃
┣━╋━┫
┃□┃□┃
┃□┃□┃
┗━┻━┛←だと判断して回答します。
css.cssと言う外部呼出し用CSSをHTMLと同ディレクトリ内に作ったと仮定して、
〓css.cssファイルに〓
#main{width:500px;}
#up_left{width:250px; height:100px;
border-style : solid; border-width:1px;
float:left;
}
#up_right{width:250px; height:100px;
border-style : solid; border-width:1px;
float:right;
}
#down_left{width:250px; height:200px;
border-style : solid; border-width:1px;
float:left;
}
#down_right{width:250px; height:200px;
border-style : solid; border-width:1px;
float:right;
}
〓HTMLファイルのhead内に〓
<link rel="stylesheet" type="text/css" href="css.css" />
〓body内に〓
<div id="main">
<div>
<div id="up_left">左上の内容</div><div id="up_right">右上の内容</div>
</div>
<div>
<div id="down_left">左下の内容</div><div id="down_right">右下の内容</div>
</div>
</div>
</div>

わかりやすく書いた例えの一つなので、好ましい記述とは言えません。border指定も不要です。
で用途によりposition属性にすれば入れ子DIVの必要がなくなります。
上下段の高さが違うのでTABLEのtdにあたる部分は全てをidにしましたがclassで役目を分担するのが正解です。
くれぐれもDIVに固執しすぎてDIV病に陥らないで下さい。

最後に、レイアウトは理解すれば簡単です。DIVをご自分で調べて理解して使うほうが聞くより用途の幅は広がります。

お礼

みなさまお返事遅れて申し訳ありません。

そうですか、スタイルシートを勉強し始めたばかりで
すべてをスタイルシートにした方がよいのかなと固執してしまっていたのですが、やはりテーブルを使った方が有用である場合もあるということですね。

ありがとうございます。
そうですよね。テーブルの方が確かに超簡単ですね（’’；）

スタイルシートはおおまかなレイアウト
テーブルはその中の表ということですね。

これでHPづくりがスムーズにいきます。

回答No.2

aprilia-rs

http://www.netmania.jp/templates/css.php
説明するよりソースを見て解析していくほうが覚えやすいと思います。

回答No.1

yambejp

テーブルはテーブルタグで作るのが一番
divでwidthやheightを指定してやれば似たようなものになりますが
上下、左右の連携はむずかしいので