ベストアンサー

スタイルシートでtableをセンター配置

2006/12/13 13:38

先日からいろいろとここで教えていただいてますが、また壁にぶつかってしまいました。とりあえず下記のソースを見てください。 <html> <head> <title>タイトル</title> <style type="text/css">  </style> </head> <body> <table align="center" width="600" height="100%" border="0" cellspacing="0" cellpadding="30"> <tr><td class="tt1"> 本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります。 </td></tr> </table> </body> </html> （宣言とmetaは省略）これで画面を縦に3分割したレイアウトで真ん中の色のついたエリアに文字や写真を入れていくフォーマットになります。しかしW3Cによる定義では厳密にはtableの「align」と「height」は非推奨になっているようなのです。そこで、cssで指定しようと思うのですが、tableを左右方向で常にセンターに配置するのと、真ん中の色の部分を画面下にぴったりくっつけるのがどうやってもできません。どなかかヒントでも結構なのでいただけませんでしょうか・・・

82w82
お礼率97% (794/812)

HTML
回答数3
ありがとう数5

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

345itati
ベストアンサー率48% (795/1639)

2006/12/13 13:55 回答No.1

こういう単純なレイアウトなら、CSSですべきですよ。複雑なレイアウトで、どうしてもCSSではやりにくいって時はtable要素も使っても仕方ないかな、とは思いますけど。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <style type="text/css">  </style> </head> <body> <div id="container">ほげほげほげほげほげほげほげほげほげほげほげほげほげほげ。</div> </body> </html> text-align: center;は本来不要ですが、古いバージョンのIEのバグ配慮。及びDOCTYPE宣言で必ず標準準拠モードにしないと、IE6ではバグの為、本来margin-left: auto; margin-right:auto;でセンタリングされるべきなのが、センタリングされませんので。検証してないけどこれでうまくいく・・と思います。

質問者

お礼 2006/12/13 14:57

早速ありがとうございます。先日もDOCTYPE宣言の件で教えていただいた方ですよね。左右のマージンを:auto;にするというのはいろんな解説サイトを読みましたが書いてませんでしたので、教えていただいて非常にありがたいです。ただ、書いていただいたソースを丸ごとコピーして検証してみたのですが（WinXP:IE6・Firefox2.0）、標準準拠モード（URLつき）では左右のセンターになりますが、下にくっつきません。また後方互換モードでは下にはくっつきますがセンターにならず左に寄ってしまいます。両方を実現するのは無理なんでしょうか？？？

その他の回答 (2)

quads
ベストアンサー率35% (90/257)

2006/12/13 23:53 回答No.3

> しかし標準準拠モードだとIE5とか古いブラウザで正しく表示されるのでしょうか。特にMacの人とか。この程度のレイアウトであれば、Valid CSS で想定される全てのWWWブラウザに対するクロスブラウザは実現可能です。より厳密な指定に対してクロスブラウザを実現したいのであれば製作者に相当の知識がないと難しいかもしれません。製作段階で不具合に繋がる指定を施す可能性があります。

質問者

お礼 2006/12/14 13:58

すいません、Valid CSS という言葉も始めて知ったのですが、「正しい」とか「正確な」CSSという解釈でいいのでしょうか。ということは、真っ当な間違いのないCSSを書けば古いブラウザやMacの人でも問題ないということですね。下記で教えていただいたソースでアップしてみて、知人に環境の違いで表示がどうなるか確認してみます。

goldfox
ベストアンサー率49% (123/249)

2006/12/13 15:45 回答No.2

下記プロパティを付け加えましょう。 > 標準準拠モード（URLつき）では左右のセンターになりますが、下にくっつきません。 html,body{height:100%;} > また後方互換モードでは下にはくっつきますがセンターにならず左に寄ってしまいます。 body{text-align:center;} #containerの中身を左寄せにしたいなら #containerのtext-align: center;をleftに。

質問者

お礼 2006/12/13 17:35

できました！！ html,body{height:100%;}なんてまったく思いつきもしませんでした。ありがとうございました！しかし標準準拠モードだとIE5とか古いブラウザで正しく表示されるのでしょうか。特にMacの人とか。知り合いの中には案外古い環境の人も多いですから、できれば新旧のブラウザでも確実に崩れずに見れるのが望ましいのですが、そこまで多くを望むのは無茶でしょうか・・・

スタイルシートでtableをセンター配置