テーブルを中央に表示させる場合

質問

cssでテーブルを中央に表示させる場合、
http://www.1uphp.com/con1/table/align-center.html
のサイトでいうと、
１．<div>の中身をtext-align:center;で中央に表示
２．中央表示されないブラウザ(FirefoxOpera)に対してmargin-方向:auto;を設定
のどちらの方法で指定したほうがいいのでしょうか？

万人向けのサイトを作ってるのでブラウザはまちまちなのですが
そのような場合のタグの書き方を教えてください。

回答No.3

noname#206842 · ベストアンサー

参考にされているサイトが、ふるいのでは？・・・
ブロックレベルとインラインレベルの違いが理解できていますか？
最近では、HTML5での記述が多くなりましたが、考え方は、まったく同じです。
ただし、tableの表示領域を、divではなく、sectionで記述するようになりました。
<section class="表" >
<table border="1" summary="">
　・・・途中省略・・・
</table>
</section>
表示位置は、table{text-align:center;}
で、どのブラウザで、表示されても、中央表示になります。

W3Cなどの仕様書を熟読されることをお勧めします。

参考URL：

http://momdo.github.io/html5/Overview.html

回答No.2

tkmojo

1の方の回答は全然違います。
インライン要素は<span>や<strong>等ですが、こういったインライン要素というのは主にテキストの文中で出てくるものですので、そもそもこれを中央寄せという概念はありません。

【例】
<p>運動会の結果は紅組の<strong>優勝</strong>でした。</p>

<p>はブロックレベル要素です。これを中央寄せにするには通常text-align:center;を使います。
<strong>は文中に登場するものですので、「中央寄せ」という概念が無いのはお分かりでしょう。
text-align:center;もmargin-(方向):auto;も、どちらもブロックレベル要素に対して使うものです。

使い方の違いを簡単に説明しますと、「ボックスの中身の中央寄せなのか、ボックス自体の中央寄せなのか」という事です。
基本的に<p>や<div>等のブロックレベル要素は、横幅を指定しなければ親ボックスの端から端までの幅を持っています。
text-align:center;はボックスの内容物の中央寄せです。

margin-(方向):auto;の場合は、ボックス自体の中央寄せです。
ブロックレベル要素は基本的に端から端までありますので、横幅の指定が無ければ何の意味もない指定になります。
横幅を指定して初めて中央に寄ります。
ボックスが中央に寄るだけで、ボックスの中身は中央には寄りません。

二つの違いはボックスに背景色を付けて試してみると意味がよくわかると思います。

前置きが長くなりましたが、結論を言うと<table>の中央寄せはmargin-(方向):auto;で行います。
<table>はブロックレベル要素ですが、ブロックレベル要素の中では特殊なタグで、幅が端から端までではなく「ボックスの幅が内容物の幅に依存」しています。
通常のブロックレベル要素は幅の指定無くmargin-(方向):auto;を指定しても意味がありませんが、<table>のみそれでも中央揃えになります。

ただ一応ブロックレベル要素ですので、<table>も他のブロックレベル要素と同じように、周りの<div>にtext-align:center;を指定しても利きません。
IEで有効なのにChromeやFirefoxで無効だというものはほとんどがIEのバグです。
IEでOKなものを作ってから他のブラウザ用に対応するのは非常に大変なので、firefoxやChromeを確認のメインブラウザとして使用し、後からIE等で確認する方が楽です。

参考にされているサイトは、10年以上前に廃れたような非常に古い技術が掲載されている等、教材には向きません。
最近出版された本などを教材として利用する事をお勧めします。

回答No.1

noname#249914

テーブルなどのブロック要素を中央そろえする場合は、2が良いですね。
テキストなどのインライン要素を中央そろえする場合に、1の方法を使用します。

インライン要素とブロック要素の違いは、下記をご参考ください。

■ブロックレベル要素とインライン要素
http://www.tagindex.com/html_tag/basic/block_inline.html

お礼

回答ありがとうございました。