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

表のセンタリング方法の謎

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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

センタリング例 表は、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>

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

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

  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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