ホームページ作成/テーブル(表)の作成・装飾 (HTML,CSS)

表のセンタリング方法の謎(3ページ目)

スタイルシートを使って表をセンタリングできますか? 表のセンタリングは、ブラウザによって表示が異なったり、セルの中身までセンタリングされてしまったり、様々な謎があります。それらの解決方法はこちら!

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

表をセンタリングする正しい書き方

さて、それでは、表をセンタリングする正しいスタイルシートの記述方法をご紹介致しましょう。

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宣言の内容に関係なく、同じように実現できます。

おわりに

今回は、スタイルシートを使って表をセンタリングする方法をご紹介致しました。 いつも自分の使っているブラウザだけでしか表示確認をしていない場合、表のセンタリングがうまくできていない可能性があることがお分かり頂けたと思います。 表をセンタリングする際には、今回ご紹介した方法をぜひご活用下さい。

なお、この記事では、表そのものの装飾は一切省略しています。表の枠線の装飾方法に関しては、以下の関連記事をぜひご参照下さい。 様々な線種を活用した表の作り方をご紹介しています。

【関連記事】

【編集部おすすめの購入サイト】
Amazonでホームページ作成の参考書をチェック!楽天市場でホームページ作成関連の書籍をチェック!
  • 前のページへ
  • 1
  • 2
  • 3
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます