Web制作をしています。

bodyタグの内部にtableを配置し、コンテンツはすべてこのtable内に入れてあります。
bodyタグに、CSSでtext-align: centerと指定してあります。
IEではきちんとtableが中央に配置されて表示されるのですが、
Firefoxでは左端に配置されて表示されてしまいます。

Firefoxでも中央に配置されて表示される(最もスマートな、HTMLとCSSの本来の目的にかなった)方法を教えてください。

回答の条件
  • 1人2回まで
  • 登録:2009/01/15 14:17:57
  • 終了:2009/01/15 16:37:25

ベストアンサー

id:pahoo No.4

pahoo回答回数5960ベストアンサー獲得回数6332009/01/15 15:08:54

ポイント36pt

TABLE をセンタリングするのは、ブラウザによってレイアウト・プロパティの継承に違いがあるため、少々厄介です。

以下の環境できちんとセンタリングする CSS の書き方として、

Windows: IE6/7, Firefox, Opera, Safari
MacOS X: Safari, Firefox
Linux: Firefox

下記サイトに紹介されている方法がよいでしょう。


参考書籍

必携 HTML/CSS/JavaScript Webブラウザー互換性辞典 (インプレスの辞典)

必携 HTML/CSS/JavaScript Webブラウザー互換性辞典 (インプレスの辞典)

  • 作者: 佐藤 和人
  • 出版社/メーカー: インプレス
  • メディア: 単行本

id:mktg2

どうも、外部スタイルシートのうち、下記の行が悪さをしているようです。

table { margin: 0px 0px 10px 0px; border: 0px; padding: 0px; border-collapse: collapse; }

どうすればよいでしょう?

2009/01/15 16:20:49

その他の回答(4件)

id:m6u No.1

《み》回答回数82ベストアンサー獲得回数62009/01/15 14:28:39

ポイント8pt

 tableタグにalign="center"という属性を追加してあげてください。

 解説ページurlを添付します。

<table> - テーブル(表)

http://www.tohoho-web.com/html/table.htm

id:mktg2

それも試したのですが、解決しません・・・

ちなみに、当該のtableタグの開始タグは下記です。外部CSSも使っています。

2009/01/15 14:38:17
id:yotaca No.2

よたか回答回数426ベストアンサー獲得回数462009/01/15 14:42:24

ポイント7pt

tabel{

width:700px;/*任意の幅で*/

div:0 auto;

}

 

これだけでこないようでしたら、bodyにwidthを指定してください。

body{

text-align: center;

width;100%;

}

 

あと、htmlの本来の目的にかなった方法をとるのであれば、

tabelでレイアウトするよりも、divで指定したほうがスマートだと思います。

 

<html>

<body>

コンテンツいろいろ

</body>

</html>

 

こんな感じでスタイルシートは、こんな感じですね。

body{

text-align: center;

width;100%;

}

#sotowaku{

width:700px;/*任意の幅で*/

div:0 auto;

}

 

参考に上記要領で私が実際に使っているブログのURLを貼っておきます。

http://blog.hanamarl.com/

http://blog.hanamarl.com/skins/hnmBg/base.css

#bodyが一番外側のdivです。

id:m6u No.3

《み》回答回数82ベストアンサー獲得回数62009/01/15 14:56:05

ポイント13pt

 下記のサンプルを起こしてみました。IE6とFirefox3でほぼ同じようにセンタリングされるようです。

<!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">
	<meta http-equiv="Content-Style-Type" content="text/css">
	<title>table align test</title>
	<style type="text/css">
	<!--
		body { text-align: center; }
		table { width: 80%; background-color: #99ffff; }
	//-->
	</style>
</head>
<body style="">
<div style="">
	<table style="">
	<tbody>
	<tr>
		<td>てきすと</td>
	</tr>
	</tbody>
	</table>
</div>
</body>
</html>

 なので、外部cssに書いてある記述が、なにか邪魔をしているのかもしれませんね。

id:pahoo No.4

pahoo回答回数5960ベストアンサー獲得回数6332009/01/15 15:08:54ここでベストアンサー

ポイント36pt

TABLE をセンタリングするのは、ブラウザによってレイアウト・プロパティの継承に違いがあるため、少々厄介です。

以下の環境できちんとセンタリングする CSS の書き方として、

Windows: IE6/7, Firefox, Opera, Safari
MacOS X: Safari, Firefox
Linux: Firefox

下記サイトに紹介されている方法がよいでしょう。


参考書籍

必携 HTML/CSS/JavaScript Webブラウザー互換性辞典 (インプレスの辞典)

必携 HTML/CSS/JavaScript Webブラウザー互換性辞典 (インプレスの辞典)

  • 作者: 佐藤 和人
  • 出版社/メーカー: インプレス
  • メディア: 単行本

id:mktg2

どうも、外部スタイルシートのうち、下記の行が悪さをしているようです。

table { margin: 0px 0px 10px 0px; border: 0px; padding: 0px; border-collapse: collapse; }

どうすればよいでしょう?

2009/01/15 16:20:49
id:stnet No.5

stnet回答回数804ベストアンサー獲得回数342009/01/15 16:25:48

ポイント36pt

table { margin: 0px auto 10px auto; border: 0px; padding: 0px; border-collapse: collapse; }

に変えてみてどうでしょうか?

id:mktg2

基本的には、tableは左寄せで表示されてほしいのです。なので、一番外側のtableのtdはtext-align: leftと指定しています。

しかし、一番外側のtableのtdだけはセンタリングしたいので、別途、

table.tmplt0_outmost { width: 900px; margin: 0px auto 0ps auto; }

と指定しているのですが・・・。

2009/01/15 16:30:50
  • id:mktg2
    みなさん、すみません。自己解決しました。
    pxをpsと書いていました。
    あなどれませんね・・・

    ありがとうございました。
  • id:fuk00346jp
    なんか変なタグ適用されてるね
    サイドバー吹き飛んでるョw

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません