お世話になっております。
・本文・テーブルは中央揃え
・テーブルの内容は左揃え
というものをCSSで作りたいのですが、
どのようにしたらいいのでしょうか。
現在のページの一部は
<div id="main">
<h1>タイトル</h1>
  <table border="1">
<p>
本文
</p>
<tr>
<td colspan="2"><h2 align="center">○○○</h2></td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
~行が続きますが省略~
</table>
</div>
のようになっています。

ちなみに cssのmainは「text-align:center;」を指定しておりますが、
IE8にしたところテーブルが左寄せになってしまいました。

なるべく多くのブラウザで同じような配置になるようにしたいのですが
どうしたらよいでしょうか。よろしくお願いいたします。

A 回答 (2件)

No.1さんの方法では、table内部のテキストが中央ぞろえになってしまい、


「テーブルの内容は左揃え」
という質問者さんのご要望を満たすことができません。

以下でどうぞ。

(1)
div#main{
text-align:center;
}

(2)
div#main table{
margin-left:auto;
margin-right:auto;
text-align:left;
}

<解説>
div、table、pなどブロック要素をセンタリングするには、左右のmargin(外余白)をautoにすることで、左右均等に外余白が設定され、ブロックがセンタリングされます(2)。
しかし、8より前のIEではmarginのautoを正しく解釈してくれません。

text-align:centerでブロック要素がセンタリングされない(これでセンタリングされるのはテキストや画像などのインライン要素のみ)のは正しい動作なのですが、8より前のIEではなぜかtext-align:centerでブロック要素がセンタリングされてしまうので、このバグを利用して、div#mainにtext-align:centerを設定して8より前のIEでセンタリングされるようにします(1)。
しかしこれでは、tableの中のテキストまでセンタリングされてしまいますので、div#main配下のtableにtext-align:leftを指定します(2)。
    • good
    • 0
この回答へのお礼

回答ありがとうございます。
No1さんのソースを見て、ぱっと直感で編集したら
思い通りになったのですが、半分しか理解していなかったため
解説がとても役立ちました。ありがとうございます。

お礼日時:2009/11/05 17:46

cssの記述に



div#main, div#main table {
 margin-left: auto;
 margin-right: auto;
 text-align: center;
}

~を適当に追記してみて下さい。
    • good
    • 0
この回答へのお礼

解凍ありがとうございます。いただいたソースを編集して
div#main table {
 margin-left: auto;
 margin-right: auto;
 text-align: left;
}
にしたところ、うまくいきました。ありがとうございました。

お礼日時:2009/11/05 17:43

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

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aと関連する良く見られている質問

QIE8で印刷できない。教えてください。

Win7,32ビット ブラウザはIE8です。
プリンタはIP3100です。
ワード、エクセル、筆まめなどその他のソフトでは印刷できます。
IEの画面をコピーし、エクセルに張付けても印刷可です。
ですが、IEでは、地図はもちろん、ホームページも印刷できません。
印刷プレビューしても、ページ下にアドレスだけが表示されるだけで、内容は表示なし。
プリンタのプロパティも確認できますが、印刷不可。
同じドライバでノートPCではIE9ですが、印刷できます。
どこかの設定でしょうか?わからず悩んでいます。
教えてください。
よろしくお願いいたします。

Aベストアンサー

Micrsoft Answersに同じ現象の方のFAQがありますので、参考にしてみてください。
([Windows7・IE8] Web ページが印刷できない (プレビューも白紙))
http://answers.microsoft.com/ja-jp/ie/forum/ie8-windows_7/windows7ie8-web/d396d148-5469-e011-8dfc-68b599b31bf5

Q と、

<td></td> と、<td><BR></td>

ホームページビルダーで作ったホムペを、KompoZerというHTMLエディタで開くと、
テーブルのなにも入っていないセルに<BR>タグが勝手に挿入されてしまいます。
<td></td> と、<td><br></td> は、
ブラウザ上ではどちらでもちゃんと表示されるのですが、
HTML文法的にはどちらが正しいのでしょうか?
また、どちらも正しい場合、<br>がある・ないで、違いがあるのでしょうか?

※ホームページビルダー、KompoZerの善し悪しは無視してください。

Aベストアンサー

文法的にはどちらも正しいです。
ブラウザの種類やHTMLのモードによって、tdが空だと、見え方が違うケースがあります。
tableでborderを指定したときに、へこんで見えるかどうか。空でないとかならずへこんで見えます。

QIE9/10 印刷できない

Windows7 64bitでIE9を使っています。
問題なく使用していたのですが、あるとき、IE9の画面が印刷ができなくなってしまいました。印刷イメージは普通に表示されます。「印刷」を押すと「Internet Explorerは動作を停止しました」と表示され、終了してしまいます。
アドオンをオフにしても改善されず、プリンタドライバーも最新です。その他、IEのリセットもしました。アンインストールしてIE8にすると問題なく使用できますが、再度IE9をインストールすると印刷できません。IE10でも同様です。
どなたかご教示いただければ助かります。

Aベストアンサー

内容が分かりませんが、ここのカテゴリは、「Skype」です。

デジタルライフ-ソフトウェア-ブラウザ

に質問した方が参考になる回答が現れるでしょう。

また、IE以外、ワードなどでも印刷できないならプリンタカテゴリで質問した方が良いでしょう。

回答にはなっていませんが、参考にどうぞ

Qからに書き換えるか迷っています

普段はドリームウィーバー2004mxを使っております。
ブラウザはInternet Explorerの新しいほうだと思います。

私はWEB制作には素人で、ソフトに頼り四苦八苦していますので
HTMLもちょっとずつ覚えているという段階の、入り口の初心者であります。
そこで、教えてください。

先日驚いたのですが
行揃えの指定のタグがありますよね。
今までの制作部分では
<td align="XXXX">を使用してきましたが、
<td style="text-align: XXXX;">
のほうが、長い目でみて、良いということでした。
理由は<td align="XXXX">のままだと
  ・Operaブラウザで不具合
  ・またはXHTML1.1で廃止(?)
といったことがあるようです。
私は自分のInternet Explorerで観ていたので何も知りませんでした。
やはり将来的に、<td align="XXXX">は色んな不具合を起こしていく恐れがあるかも知れません。

以下は私が立てさせていただいた質問で、
経験者のおっしゃることですので信憑性はたいへん高いと思っています。
http://oshiete1.goo.ne.jp/qa5051214.html

で、本題はここからですが、長い目でみた場合に、
<td align="XXXX">を
<td style="text-align: XXXX;">の状態に書き換えるべきでしょうか。

すでに<td align="XXXX">で作ってある部分が結構あります。
ただWEBサイトは長く使いたいので、今のうちに手を打てるなら打っておこうと思います。
この書き換え案に迷っていますので、お詳しい方、アドバイスをください。
または今WEB制作中の専門家の方は、
<td align>と
<td style="text-align: XXXX;">
はどちらを使っていらっしゃることが多いのでしょうか。

もしかしたら<td valign="XXXX">も同様のことが言えるのかも知れません。
宜しくお願いいたします。

普段はドリームウィーバー2004mxを使っております。
ブラウザはInternet Explorerの新しいほうだと思います。

私はWEB制作には素人で、ソフトに頼り四苦八苦していますので
HTMLもちょっとずつ覚えているという段階の、入り口の初心者であります。
そこで、教えてください。

先日驚いたのですが
行揃えの指定のタグがありますよね。
今までの制作部分では
<td align="XXXX">を使用してきましたが、
<td style="text-align: XXXX;">
のほうが、長い目でみて、良いということでした。
理由は<td alig...続きを読む

Aベストアンサー

一応、XHTML1.1で廃止されていないという根拠です。

W3Cは、日本(日本語)の文科省みたいなところです。
http://www.w3.org/

XHTML1.1のtableのページ(英語ですがタグ名とタグ属性だけなのでわかると思います)
http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_simpletablemodule


> #このあたりは、制作者の考え方次第ですね。
同意します。

読みやすいかどうかは慣例を重視(基準に)しています。
たとえば予算や売り上げ表などの「(単位千円)」みたいな記述は右寄せしています。

align指定は、もし翻訳サイトを通じてアラビア語など右から左に書く言語で表示した場合、
左寄せ、右寄せが逆転し、非常の読みづらくなります。
(この現象はfloatも同様です)

W3C(など)はそういうのも考慮し、alignなしを推奨しているようですが、(W3Cはアメリカだったと思いますが、おそらく日本語の右寄せのような習慣がないと思いますので)
現実には、私はalignを使っての影響はほとんどないと思います。

Operaの古いバージョンで、この状態をシミュレーションできた気がしますが、
もし「不具合」がその事であれば、私は無視できる範囲だと思います。

一応、XHTML1.1で廃止されていないという根拠です。

W3Cは、日本(日本語)の文科省みたいなところです。
http://www.w3.org/

XHTML1.1のtableのページ(英語ですがタグ名とタグ属性だけなのでわかると思います)
http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_simpletablemodule


> #このあたりは、制作者の考え方次第ですね。
同意します。

読みやすいかどうかは慣例を重視(基準に)しています。
たとえば予算や売り上げ表などの「(単位千円)」みたいな記述は右寄せ...続きを読む

Qwindows7(64bit) + IE8 で印刷ができない。

windows7(64bit) + IE8 で印刷ができない。

windows7(64bit) + IE8 で印刷ができなくなってしまったのです。
IE8 以外のアプリではプリントアウトができます。

また、プリンタデバイスもアンインストールしてインストールしなおしました。それでも、改善されませんでした。

セキュリティーレベルをリセットしたら、一度はプリントアウトができたのですが、その後、またプリントアウトができなくなってしまいました。

どなたか、改善策をご存知の方がいましたらお教えください。

ネットを検索したのですが、これとまったく同じ症状の解決策を見つけられなかったのです。

-------------------------------------------------------------------------
以下、エラーメッセージです。


ライン: 2032
文字: 1
エラー: 未定義のエラーです。
コード: 0
URL: res://ieframe.dll/preview.js

Aベストアンサー

私も全く同じエラーで困りました。マイクロソフトのサポートで回避策を教えていただきました。
インターネット保護モ-ドを無効にすると印刷できます。ただこれは解決策ではなく、印刷するたびに切り替えるのもおかしな話です。
サポートの方にも考えてもらいましたが、解決には至りませんでした。
ところがたった今、印刷できることに気づきました。簡単な話です。
理由は分かりません。サポートの営業日にサポートの方に教えたいと思っています。
事情はこうです。
IEを起動して印刷を試みることを何度も試しているうちに、印刷できる条件に気付きました。
それはIE8の64BIT版ならエラーが出ないで印刷できるという偶然の発見でした。
これも解決策とは言えませんがWEB画面を印刷することについてはとりあえず良しとしようと思います。
ただAdobe Flash Playerなどは32BIT版でなければ使用できないので使い分けが必要ですね。

ほかに何か解決策があれば、私にも教えてください。
難しいのはだめですが。

Q■ でテキストボックスとセルの間にわずかな隙間があいてしまう・・

<TABLE>
<!-- ここから10回ほど繰り返し -->
<TR>
<TD>
<INPUT TYPE="TEXT">
</TD>
</TR>
<!-- ここまで -->
</TALBLE>

こう書くときに、テキストボックスの下にわずかな隙間が
できるのを防ぎたいのですが、何か方法はありませんでしょうか?

Aベストアンサー

隙間をつくってしまう原因はいくつかあります。

(1) <TABLE>タグ
BORDER=0またはNOBORDERにする。
CELLSPACING=0
CELLPADDING=0

(2) <INPUT TYPE="TEXT">前後の改行
<TD><INPUT TYPE="TEXT"></TD>

(3)<FORM>や</FORM>タグの記述場所
恐らくこれが原因でしょう。
上記には記述されていませんが、
<TABLE>
<TR>
<TD>
<FORM ~>
</TD>
</TR>
<!-- ここから10回ほど繰り返し -->
<TR>
<TD>
<INPUT TYPE="TEXT">
</TD>
</TR>
<!-- ここまで -->
<TR>
<TD>
</FORM>
</TD>
</TR>
</TABLE>
としていませんか?
HTMLとしては好ましくないと思いますが、<FORM>や</FORM>の前後にある<TR><TD>~</TD></TR>を取り除き、以下の様にします。
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
<FORM ~>
<!-- ここから10回ほど繰り返し -->
<TR>
<TD><INPUT TYPE="TEXT"></TD>
</TR>
<!-- ここまで -->
</FORM>
</TABLE>

尚、表の罫線を残すのであればBORDERを変更したりしてください。

隙間をつくってしまう原因はいくつかあります。

(1) <TABLE>タグ
BORDER=0またはNOBORDERにする。
CELLSPACING=0
CELLPADDING=0

(2) <INPUT TYPE="TEXT">前後の改行
<TD><INPUT TYPE="TEXT"></TD>

(3)<FORM>や</FORM>タグの記述場所
恐らくこれが原因でしょう。
上記には記述されていませんが、
<TABLE>
<TR>
<TD>
<FORM ~>
</TD>
</TR>
<!-- ここから10回ほど繰り返し -->
<TR>
<TD>
<INPUT TYPE="TEXT">
</TD>
</TR>
<!-- ここまで -->
<TR>
<TD>
</FORM>
</TD>
</TR>...続きを読む


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

~~ を表示することはできますか?

テーブルタグ
<table>
<tr>
<td>

をそのまま文字として表示することはできますでしょうか?

<を全角の<にすればいいのでしょうが、なにぶん、テーブルタグの量が膨大なため、手でいちいち直してたら数ヶ月、数年かかってしまいます。

タグをそのまま画面に表示させる良い方法はないでしょうか?

詳しい方いらっしゃいましたら教えていただけないでしょうか?

よろしくお願いします!

Aベストアンサー

タグの無効化というタグです

<xmp>タグ</xmp> タグを無効化にして文字として表示されます
良かったら使ってみて下さい

QIE8でページの印刷ができない

OSはビスタです。IE8で開いたページを印刷しようと右クリックで印刷レビューし、縮小印刷でA4一枚に収まる程度に合わせ、いざ印刷ボタンを押すと、IE8がビジー状態になってしまいます。パソコンやプリンタを再起動してもダメでした。一応プリンタのドライバも確認しましたが最新のが入っています。プリンタはエプソンのPM-G800です。

他にグーグルクロームも使っているのですが、選択範囲の印刷ができないので困っています。

この印刷できないエラーがIE8に起因するものでしたら他のブラウザでもいいので、(1)範囲の選択ができる (2)縮小や拡大ができる (3)画像があるのでそれも一緒に印刷できる  といった条件で印刷できるものはないでしょうか。

アドバイスお願いします。

Aベストアンサー

設定をリセットしてみて下さい。
http://support.microsoft.com/kb/923737/ja
これで駄目なら他のプリンタでテストして下さい。
仮想pdfプリンタもあります。
http://www.vector.co.jp/soft/win95/writing/se220540.html
http://www.forest.impress.co.jp/lib/offc/document/pdf/primopdf.html
http://www.forest.impress.co.jp/lib/offc/document/pdf/livepdfprt.html

Q

どちらを使うべき?

文字列を中央に寄せたい場合は、
<p align="center"> <center> どちらを使うべきでしょうか?
最近では、<p align="center">の方が多い気がするのですが、
何か良いことでもあるのでしょうか?

Aベストアンサー

どちらも使うべきではありません。見た目・レイアウトは、HTML ではなく、CSS などのスタイルシート言語で指定します。

なお、<center> は <div align="center"> の省略形です。つまり、<center> は単なる div 要素と同じように扱われるのに対し、<p align="center"> は一つの段落要素として扱われるということです。

QIEで印刷できない

こんにちは。

WIN MEでIE6.0.2800.1106で、受信文書を印刷をしようとすると下記のメッセージが出て印刷できないのです。プリンターは、エプソンPM-760Cです。

IEスクリプトエラー ライン:509 文字:1 エラー:書き込みできません コード:0 URL:res://C\WINDOWS\SYSTEM\SHDOCLC.DLL/preview.dlg

よろしくお願いします

Aベストアンサー

http://support.microsoft.com/default.aspx?scid=KB;ja;293176

を参照ください

参考URL:http://support.microsoft.com/default.aspx?scid=KB;ja;293176

Q