• ベストアンサー

複数のテーブルを無条件に中央寄せする方法

テーブルを無条件で中央寄せする方法を知りたいです。テーブルのセルの中にテーブルを作ったり・・・などしているので、是非ともマクロで全てのテーブルを中央寄せする方法を知りたいのです。 table{text-align:center;} でいいんでしょうか?

  • moosa
  • お礼率34% (451/1290)
  • HTML
  • 回答数2
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • partita
  • ベストアンサー率29% (125/427)
回答No.1

よくないです。 text-alignはインライン要素に対して適用するものです。table{text-align:center;}とすると、テーブルの中のテキストや画像がセンター揃えになるだけで、tableそのものは画面中央に配置されません。 tableはブロック要素だからです。 おおまかに言うと、ブロック要素は「箱」みたいなものです。table、p、div、ulなどです。インライン要素はその「箱」に含まれるもので、テキスト・画像とおぼえておけばよいと思います。 「箱」そのものをセンターに揃えるためには margin:auto; を使用します(ただしWinIE5.5以前で適用されないのが難点←ブラウザバグ)。 table {margin:auto;} を使用しないのなら <table align="center"> とする方法もあります。

その他の回答 (1)

回答No.2

まずはそれぞれの記述次第で対処方法が異なります。 とはいえ、みんな中央寄せされても問題ないのですよね!? という事で、 table{text-align:center;margin:auto;} これでまずは良いでしょう。 バグのブラウザもありますが、その動きを逆に利用して・・・。(という事で、本当はこの対処法は正しい方法ではないですが実用的な方法という事で・・・。) あとは逆に中央寄せされて困った処を、 改めて .classsample{text-align:left;}とでもすれば・・・。(もちろん当該箇所に class指定などが必要ですが。) ただ面倒かなぁ~というか問題になりそうなのは、 margin: は継承されませんが、 text-align: は継承されますので、 望まない部分まで中央寄せされたりして、 返って対処が大変だったりして・・・。 という事で、結局元の作り方次第なのでぇ~。 あまり大変な場合、1から作り直してテーブルを排除した方が楽な可能性もあったりして・・・。

moosa
質問者

お礼

みなさん多謝いたします

関連するQ&A

  • divタグを中央寄せでwidthを指定したい。

    Webのデザインを行っているのですが、以下のような事象に困っています。 ブラウザはGoogle chromeです。 <body> <div style="text-align:center;"> あいうえお </div> </body> これは中央寄せになるのです。しかし、 <body> <div style="text-align:center;width:400px;"> あいうえお </div> </body> こうすると、中央寄せが解除されてしまいます。 どうしてこうなるのでしょうか? 出来れば理由も含めて理解したいのですが、教えて頂けないでしょうか。

    • ベストアンサー
    • HTML
  • 中央寄せのタグについて

    HPを作成中です。 文字を<DIV ALIGN="CENTER">で 中央寄せにして、なおかつ改行した2行目の頭を揃えるにはどうしたらよいでしょうか?今のままですと、改行した行が、それぞれ中央に寄ってしまいます。教えてください。

    • ベストアンサー
    • HTML
  • IEで中央寄せにしたい

    <html> <head> <title>test</title> <style type="text/css"> <!-- body {margin-right : auto; margin-left : auto; width : 50%} div#center { text-align: center; } --> </style> </head> <body> <DIV style=background:red;> test</DIV> </body> </html> これでスレイプニルだとちゃんと中央寄せになるのですが IE9だと横画面いっぱいに広がってしまいます。 IEでも指定した幅で表示させる方法はありますか?

    • ベストアンサー
    • HTML
  • XHTMLでオブジェクトを画面中央に置く方法

    オブジェクトをブラウザの画面中央に置きたいのですが、これのうまいやり方が分かりません。XHTMLに準拠し、CSSもきちんと使いたいので「縦幅・横幅100%で縦横中央寄せにしたテーブルの中に置け」というやり方は使いたくありません。というよりXHTMLに準拠した場合、テーブルに限らず全てのタグにおいて、縦幅をいっぱいに広げるということはできないみたいです。横位置を中心にするにはCSSでtext-align: center;でできますが、これの縦にあたる記述法はありません。縦方向の中心にセットするにはどうしたら良いのでしょうか

    • ベストアンサー
    • HTML
  • CENTERでTABLEの中まで中央揃いになってしまう

    何年か前からHPを作っているのですが、以前は確かにテーブルは中央に表示されていて、中の文字は普通に左から表示されていたのですが、今日久しぶりにそのページを見てみると、中の文字まで中央寄せになっていました。記述は以下のとおりです。 <CENTER> <TABLE> ~テーブルの記述~ </TABLE> </CENTER> で、他のページを見てみると、同じ記述でもちゃんと左寄せのまま(標準)になっていました。「???」と思っていろいろ違いを調べてみると、冒頭に<!DOCTYPE HTML PUBLIC "HTML 3.2">とあるものが中央寄せになっていました。この記述をはずすと意図どおりに「テーブルは中央表示、中の文字は左から表示」となります。セル指定「ALIGN=LEFT」は入れてません。もちろん、入れると左から表示となりますが、以前はちゃんと表示されていたのに何か途中で変わったんでしょうか? 場合によっては全ページの調査をして修正の必要があるので頭が痛いですが、どうするのがBETTERなのかアドバイスいただければうれしく思います。

    • ベストアンサー
    • HTML
  • cssでテーブルを中央配置にするには?

    よろしくお願いします。 テーブルを中央配置にしたいのですが、 <center>、<div align="center">は、W3Cの非推奨タグであるため、代替方法として、<div style="text-align:center">を使用してみたのですが、うまくいきません。 <body> <div style="text-align:center"> <table> <tr> <td>あいうえお</td> </tr> </table> </div> </body> としたとき、WinXP IE6.xではテーブルが中央に配置されるのですが、WinXP Netscape 7.x では中央に配置されませんでした。どなたか解決策をご存知でしたらご教授願います。よろしくお願いします。

    • ベストアンサー
    • HTML
  • テーブルを中央に表示させる場合

    cssでテーブルを中央に表示させる場合、 http://www.1uphp.com/con1/table/align-center.html のサイトでいうと、 1.<div>の中身をtext-align:center;で中央に表示 2.中央表示されないブラウザ(FirefoxOpera)に対してmargin-方向:auto;を設定 のどちらの方法で指定したほうがいいのでしょうか? 万人向けのサイトを作ってるのでブラウザはまちまちなのですが そのような場合のタグの書き方を教えてください。

    • ベストアンサー
    • CSS
  • インラインフレームの中央寄せについて

    ブログのサイドバーに、アマゾンのウィジェットを貼り付けています。 しかし、<iframe・・ align="center">にしても、中央寄せにならず、左寄せになっている状態です。 元のソースは以下になります。 <iframe src="http://rcm-jp.amazon.co.jp/e/cm?~(省略)~" marginwidth="0" marginheight="0" width="120" height="240" border="0" frameborder="0" style="border:none;" scrolling="no"></iframe> どのようにすれば、サイドバーに中央寄せとなるのでしょうか? ご回答よろしくお願い致します。

  • floatを使用すると中央寄せにならない

    CSSについて質問があります。 floatを使って2段組のレイアウトにしたのですが、 MacのIE5.2で見ると、floatを使ったdiv(container)だけ中央寄せではなく 左寄せになってしまいます。MacのSafariやFirefoxでは正常に見れました。 URL:http://fuma.xrea.jp/ /* CSSソース*/ html{height : 100%; width : 100%;} body{width : 100%; text-align : center; margin : 0px auto; padding : 0px;} #container{ margin : 0px auto; padding : 0px; width : 720px;} div#main{ text-align : left; width : 490px; margin : 0px; padding : 8px 0px; float : left;} div#side{ margin : 0px; padding-bottom : 8px; text-align : left; width : 230px; float : right;} div#copyright{ text-align : center; margin : 0px auto; padding : 10px 0px; clear : both; width : 720px;} /* HTMLソース */ <div id="container"> <div id="side">てすと</div> <div id="main">てすと</div> </div> <div id="copyright">test</div> <div align="center">を使っても中央寄せになりませんでした。 どうすれば、MacのIEでも中央寄せにできますか?

    • ベストアンサー
    • CSS
  • テーブル自体を中央に表示する場合は

    cssでテーブルの中の文字を中央に表示させるときは text-align: center; を使いますが、 テーブル自体を中央に表示する場合は margin-left:auto;margin-right:auto; を使うみたいですが、 なぜ text-align: center; ではだめなのでしょうか? テーブル自体がテキストじゃないからですか?

    • ベストアンサー
    • CSS

専門家に質問してみよう