- ベストアンサー
表をtext-alignで中央に出したい・・・
こんな↓HTMLを書いているのですが、表がFirefox3.5の場合 中央に寄ってくれません。IE6なら寄ってくれるのですが・・・ CSSやHTMLの文法的な部分では誤りがないことを確認したのですが、 どうすればFirefoxでも表を中央に出せるでしょうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html;charset=EUC-JP"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="index" href="./"> <link rev="made" href="mail"> <style type="text/css"> <!-- .main{ text-align:center; } --> </style> <title>テーブル表示</title> </head> <body> <div class="main"> <table summary="chart 1"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> </div> </body> </html>
- 錯雑 っち（@sakuzatchi）
- お礼率66% (69/104)
- HTML
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
こんなカンジでしょうか？ <html> <head> <style type="text/css"> <!-- div.alignleft{ text-align:left } p.aligncenter{ text-align:center; } table{ margin-left:auto; margin-right:auto; text-align:left; } --> </style> <title>テーブル表示</title> </head> <body> <div class="alignleft" > <p class="aligncenter" > <table > <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table > </p > </div > </body> </html>
その他の回答 (3)
table自体を中央に表示させるなら、tableを置く「親要素のブロックレベル」のスタイルに以下を記述。 margin-left:auto;margin-right:auto;text-align:center; 更に上記の適応では文字列は中央配置されるので、table内の文字列を標準にする。 table,tr,td{ text-align:left; } 尚、DOCTYPEは「標準」で実行。
お礼
本番用の設定(中身は例示と異なります)で試すと なぜかIE6で表示が変になりました。 でもこの方法で大丈夫なはずだと思いますので 本番の方でIEできちんと見えるよう調整したいと思います。 ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
Q) なにをtext-alignにしたいのですか？ text-alignは、それが所属するブロック内で【テキスト】をセンター配置するものです。 たとえば、p内のテキストとか、tab;e内のcell内の文字とか ★tableを配置するものではありません。 セル内の文字をセンター配置したいなら、IE5以前では、cell内に継承されないバグがあるので、 div.main table tr td, div.main table tr th{ text-align:center } とかして <table class=main"> <tbody> <tr><th></th></tr> <tr><td></td></tr> </tbody> </table> とでもしておけばよい。これで、mainブロック内にあるtable内のセルについてのみ適用される。 なお、tableをセンター配置したいなら div.main table{ width:80%; margin-left:auto; margin-right:auto; }
お礼
詳しい説明ありがとうございました。 セルの中身は特にどのような配置にするかは決めておらず、 表そのものだけ中央に来てくれればいい、ということでした。
- k_mikoton
- ベストアンサー率0% (0/1)
このように記述すると、 Firefox でも表が中央に表示されます。 表にスタイルシートを適用したい場合（表の背景色を変えるなど）は、 別途記載するか、外部CSSにしてみると良いと思います。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="index" href="./"> <link rev="made" href="mail"> <title>テーブル表示</title> </head> <body> <div align="center"> <table summary="chart 1"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> </div> </body> </html>
お礼
ご回答ありがとうございました。 align属性を使うと100%思い通りになるのですが、 肝心のHTML4.01 StrictがTransitionalになってしまうのです。 今回はStrictで書きたかったのでこの方法はダメなのです。
お礼
この方法で何とかなりました。 ありがとうございます。