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

解決済

質問者：82w82
質問日時：2006/12/13 13:38
回答数：3件

先日からいろいろとここで教えていただいてますが、また壁にぶつかってしまいました。とりあえず下記のソースを見てください。

<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を左右方向で常にセンターに配置するのと、真ん中の色の部分を画面下にぴったりくっつけるのがどうやってもできません。
どなかかヒントでも結構なのでいただけませんでしょうか・・・

通報する

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

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： 345itati
回答日時：2006/12/13 13:55

こういう単純なレイアウトなら、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;でセンタリングされるべきなのが、センタリングされませんので。
検証してないけどこれでうまくいく・・と思います。

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2006/12/13 14:57

No.3

回答者： quads
回答日時：2006/12/13 23:53

> しかし標準準拠モードだとIE5とか古いブラウザで正しく表示されるのでしょうか。

特にMacの人とか。

この程度のレイアウトであれば、Valid CSS で想定される全てのWWWブラウザに対するクロスブラウザは実現可能です。
より厳密な指定に対してクロスブラウザを実現したいのであれば製作者に相当の知識がないと難しいかもしれません。
製作段階で不具合に繋がる指定を施す可能性があります。

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2006/12/14 13:58

No.2

回答者： goldfox
回答日時：2006/12/13 15:45

下記プロパティを付け加えましょう。

> 標準準拠モード（URLつき）では左右のセンターになりますが、下にくっつきません。
html,body{height:100%;}

> また後方互換モードでは下にはくっつきますがセンターにならず左に寄ってしまいます。
body{text-align:center;}
#containerの中身を左寄せにしたいなら
#containerのtext-align: center;をleftに。

- 0
- 件

通報する

この回答へのお礼

できました！！
html,body{height:100%;}なんてまったく思いつきもしませんでした。
ありがとうございました！

しかし標準準拠モードだとIE5とか古いブラウザで正しく表示されるのでしょうか。特にMacの人とか。
知り合いの中には案外古い環境の人も多いですから、できれば新旧のブラウザでも確実に崩れずに見れるのが望ましいのですが、そこまで多くを望むのは無茶でしょうか・・・

通報する

お礼日時：2006/12/13 17:35

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