表をセンタリングする正しい書き方
さて、それでは、表をセンタリングする正しいスタイルシートの記述方法をご紹介致しましょう。
Step.1 : センタリングには marginプロパティ
表などのブロックレベル要素をセンタリングするには、「外側の余白」を調節するmarginプロパティを使います。
marginプロパティの値には、通常は、「 12px 」や「 1.5em 」などの数値（と単位）を指定します。 センタリングさせるためには、この値を「 auto 」にします。 marginプロパティの値として auto を指定すると、左右の余白量が同じになるよう自動的に調節されます。 左右の余白量が同じになるということは、つまり「センタリングされる（中央寄せされる）」ということです。
Step.2 : text-alignプロパティも使わざるを得ない
上記の「Step.1」は、スタイルシートの仕様として正しいセンタリングの指定方法です。
しかし、これには問題があります。 実は、Internet Exporerでは、この正しい指定方法を解釈できず、センタリングはされないのです。 そこで、最初にご紹介した「text-alignプロパティ」を使った方法も併用する必要があります。
※ここでの「Internet Exporer」とは、最新版のInternet Exporer 6.0のことを指しています。
ただ、その方法を使ってしまうと、「セルの中身までセンタリングされてしまう」という新たな問題が発生してしまいます。 まったく困ったものですね。
Step.3 : さらにtext-alignプロパティを使う
「セルの中身がセンタリングされてしまう」という問題を解決するため、セルを構成する td要素 に対してさらにtext-alignプロパティを使用します。 値に left を指定すれば、センタリングが解除されて左寄せに戻ります。
…以上の3つのステップを実現したソースが次の通りです。
言葉で説明するとややこしい感じがするかも知れませんが、ソースとして書いてみれば、それほどややこしいわけではありません。
スタイルシート部分：
<style type="text/css">
div.ctable {
text-align: center; /* IEでセンタリングさせる方法 */
}
div.ctable table {
margin: auto; /* 標準のセンタリング方法 */
text-align: left; /* IE用方法の弊害対策用 */
}
</style>
HTML部分：
<div class="ctable"> <table>
<tr><th>スタイルシート</th><th>センタリング</th></tr>
<tr><td>CSS</td><td>Centering</td></tr>
</table>
</div>
上記のスタイルシートなら、望み通りの「表のセンタリング」が実現可能です。 ※DOCTYPE宣言の内容に関係なく、同じように実現できます。
おわりに
今回は、スタイルシートを使って表をセンタリングする方法をご紹介致しました。 いつも自分の使っているブラウザだけでしか表示確認をしていない場合、表のセンタリングがうまくできていない可能性があることがお分かり頂けたと思います。 表をセンタリングする際には、今回ご紹介した方法をぜひご活用下さい。
なお、この記事では、表そのものの装飾は一切省略しています。表の枠線の装飾方法に関しては、以下の関連記事をぜひご参照下さい。 様々な線種を活用した表の作り方をご紹介しています。
【関連記事】
