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