yucken の業務上電脳 Tips 日記、なのだよ。-弐式-

いまさら電脳 Tips を書いてみむとして、するなり.元々は広い意味での電脳(コンピュータ)の Tips を書いていたのですが,いつのまにか,解析ツールの「電脳 ruby」の Tips がメインに.‥‥‥で,5 年間放置してたのだけどやはり Tips を書くブログがないと不便なのでふっかちさせたのであります.(・)>

CSS を用いてテーブルを中央に表示する

基本は、

で囲んで、text-align:center を設定すればいいのですが、

改善前

<style type="text/css">
 <!--
     .center     {text-align:center;}
 -->
 </style>
 </head>
 <body>
         <div class="center">
         <table border="1">
(省略)
         </table>
         </div>
 </body>

これだと、FirefoxOpera では真ん中に表示されてくれないようです。というわけで、

タグに margin:auto; を設定します。

改善後

<style type="text/css">
 <!--
     .center{text-align:center;}
     table{margin: auto}
 -->
 </style>
 </head>
 <body>

         <div class="center">
         <table border="1">
(省略)
         </table>
         </div>
 </body>

参考にしたサイト:
ホームページ作成 - テーブルを表示する(中央)