- ベストアンサー
CSSでテーブルを中央にする方法
CSSでテーブルを中央にする方法を教えてください いろいろなサイトで見た通りにしたのですが、どうしてもFirefoxではテーブルが中央によりません。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="description" content=""> <meta name="keywords" content=""> <title>テーブル</title> <style type="text/css"> <!-- .tableley { margin-left: auto; margin-right: auto; text-align: center; } //--> </style> </head> <body> <div class="tableley"> <table cellpadding="0" cellspacing="0" summary="テスト" border="1"> <caption style="font-weight: bolder;">てすと</caption> <tbody> <tr> <td>てすと1</td> <td>てすと2</td> <td>てすと3</td> <td>てすと4</td> </tr> <tr> <td>てすと5</td> </tr> </tbody> </table> </div> </body> </html> 何が悪いのでしょうか？ <div align="center">にするしか方法がないのでしょうか？ 文法検証すると<div align="center">はあまりよくない使い方と指摘されてしまいます よろしくお願いします。
- tekito-MAX
- お礼率70% (24/34)
- HTML
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<style type="text/css"> <!-- .tableley { text-align: center; } .tableley table{ margin-left: auto; margin-right: auto; } .tableley caption{ margin-left: auto; margin-right: auto; } //--> と記述すれば、table、captionともにセンタリングされます。 余談ですが、 .tableley caption{ margin-left: auto; margin-right: auto; font-weight: bold; } と記述すれば、 <caption>てすと</caption> と「style="font-weight: bolder;"」を消してもcaptionが太字になります。 ここら辺は好みですが…
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
おそらく間違えて覚えちゃったんでしょうね・・・ テーブルをかこうdivにtext-align:centerするのはIEのバグを利用した方法 ですので、あっていますが、マージンをオートにするのは「テーブル」に 対してです。 .tableley { text-align: center; } .tableley table{ margin-left: auto; margin-right: auto; }
お礼
回答ありがとうございました。 なんとなく上手くは行ったのですが、今度は指示どうりにやると <caption style="font-weight: bolder;">てすと</caption> この部分が微妙に真中ではなくなってしまうんですよね table部分は真中なんでが・・ IEの場合は正常に表示されています
お礼
回答ありがとうございました。 log1さんのご指導で綺麗にできました。