表をセンタリングできますか?

センタリング例 表は、table要素などを活用して作ることができますね。 この表をスタイルシートを使ってセンタリングしたい(中央に寄せたい)場合、どう記述すれば良いでしょうか?

表のセンタリングは、少々単純にはいきません。 本来は単純なはずなのですが、ブラウザによって表示のされ方が異なるため、少し工夫が必要です。 さらに、同じブラウザでも条件によっては表示が異なってしまうため、余計にややこしくなっています。

ですから、普段、自分の使っているブラウザでしか表示確認をしていない場合、 他のブラウザでは望み通りの表示(表のセンタリング)ができていない可能性があります。

今回は、この「表のセンタリングの謎」について解説したいと思います。

表をセンタリングするには?

1行の中で文字をセンタリングするには、text-alignプロパティが使えました。 値に center を指定するだけです。
これを利用して、表(table要素)を囲むブロック(例えばdiv要素)を用意して、そこに text-alignプロパティに値centerを指定するとどうなるでしょうか?
例えば、次のようなソースです。

<div style="text-align:center;">
    <table>
      <tr><th>スタイルシート</th><th>センタリング</th></tr>
      <tr><td>CSS</td><td>Centering</td></tr>
   </table>
</div>

先に言っておきますと、この方法は、正しい方法ではありません。間違っています。 しかし、一部の条件を満たせば、望み通りのセンタリングになってしまう場合があります。

何がマズくて、どうすれば良いのでしょうか? 続きは次のページで!