- ベストアンサー
レイアウトのためにTableを使ってはいけない？
「Tableはレイアウト目的で使うべきではなく、レイアウトはCSSで定義するべき」ということについて、 もっともだと思うものの、具体的なやり方がわかりません。 divかspanとclassを使うことは予想できるのですが・・・ 次のようなレイアウトの場合、CSSでどのように置き換えるのでしょうか？ <table width="800"> <tr> <td colspan=2 width="800"> ヘッダ領域 </td> </tr> <tr> <td width="100"> メニュー領域 </td> </tr> <tr> <td width="700"> コンテンツ領域 </td> </tr> </table>
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- suzuko
- ベストアンサー率38% (1112/2922)
- auty
- ベストアンサー率58% (284/486)
簡単な１例を挙げてみます。 width="800" (700,100)とあるのを考慮して 以下のコードを参考にしてみてください。 ------------------------------------------------------------ <html> <head> <title>Webサイト</title> <style type="text/css"> <!-- #table1 { /* 親ボックス */ width: 400px; height: 200px; background-color: #FFEAEF; position: absolute; top: 50px; left: 100px; } #header1 { width: 400px; height: 100px; top: 50 px; left: 150 px; background-color: #88EAEF } #boxL { /* ボックス左 */ width: 100px; height: 100px; background-color: #ffffff; position: absolute; top: 100px; left: 1px; } #boxR { /* ボックス右 */ width: 300px; height: 100px; background-color: #ffffcc; position: absolute; top: 100px; left: 100px; } --> </style> </head> <body> <div id="table1"> <div id="header1"> ヘッダ領域 </div> <div id="boxL"> メニュー領域 </div> <div id="boxR"> コンテンツ領域 </div> </div> </body> </html>
お礼
position: absolute; がポイントで絶対位置で指定する方法ですね。 ご回答ありがとうございました。
お礼
ご紹介いただいたサイトを読みました。 テーブルの置き換えにabsoluteを使うことについてはちょっと抵抗を感じていたのですが、フロートの解説でよくわかりました。IEでのバグがあり、意図しない表示になること。 レイアウトはCSSをつかうべきだけどもまだテーブルも多くつかわれるとどこかで読んだのですが、その理由も納得です。 勉強になりました。ありがとうございました。