- 締切済み
cssでテーブルの位置を設定するには？
<table border="1" align="left">でテーブルの位置を競ってすることはできたのですが スタイルシートで行いたいです。 そもそも他のテーブルはすべて中央に寄せたいため、 table { margin-left: auto; margin-right: auto; } としています。 そのうえで、任意のテーブルのみ左に寄せて表示したいので table.test { align:left; } としたのですが、うまくいきません。 ---------------------------------------------------------- <html> <head> <title>test</title> <STYLE type="text/css"> table { margin-left: auto; margin-right: auto; width: 40%; } table.test { width: 80%; align:left; } </STYLE> </head> <body> <table border="1"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> <br><br><br> <table border="1" align="left"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> <br><br><br> <table border="1" class="test"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> </body> </html> ----------------------------------------------------- このコードだと、 table.test { width: 80%; align:left; } の、 width: 80%; の部分は認識されるようですが、align:left;は無視されます。 スタイルシートでテーブルの位置を設定する方法をご教授ください。
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
まずHTMLはstrictにして、DOCTYPEスイッチは標準モードで起動するようにすること 『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』 →https://www.google.co.jp/search?q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a これは、ブラウザ間の誤差をなくすための最低限の設定です。 ・tableなどのブロック要素は、align:leftでは移動してはなりません。 古いIEや互換モードで動作すると、この誤った指定に従うことがあります。 もちろんalignというプロパティはCSSにはありません。 ※ 全プロパティ表( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/propidx.html ) Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )でチェックすると分かるように、tableはsummary属性が必須ですので、それを使って指定すると楽でしょう。 <table summary="日本の人口推移" border="1"> <tbody> <tr><th abbr="2003">15</th><td>127,694</td></tr> <th abbr="2004">16</th><td>127,787</td></tr> <th abbr="2005">17</th><td>127,768</td></tr> <th abbr="2006">18</th><td>127,901</td></tr> </tbody> </table> <table summary="男女の人口推移" border="1"> <tbody> <td></td><th abbr="男">男性</th><th abbr="女">女性</th></tr> <th abbr="2003">15</th><td>62,368</td><td>65,326</td></tr> <th abbr="2004">16</th><td>62,380</td><td>65,407</td></tr> <th abbr="2005">17</th><td>62,349</td><td>65,419</td></tr> <th abbr="2006">18</th><td>62,387</td><td>65,514</td></tr> </tbody> </table> とすると、table要素全体の指定を table{margin:3em auto;} /* タイプセレクタひとつのみ 詳細度0 0 0 1 */ そして、特定のtableだけ、左に寄せたければ table[summary="男女の人口推移"]{margin-left:0;} /* タイプセレクタ＋要素セレクタ 詳細度0 0 1 1 */ で、登場順に関わらず後者で上書きされます。 誰が見ても表は中央、男女別の表は左寄せだと分かるでしょ。 ★余白をあけるために<br>の連続はしてはなりません。 ★セレクタや詳細度というカスケーディングを活用して、HTMLには余計な事は書かない。 せっかくのCSS(カスケーディング スタイルシート)の根幹機能使いましょう。 5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html ) 6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html ) 絶対にマスターすべきです。
- outbrave
- ベストアンサー率60% (231/380)
左のマージンを無くせばいいだけです。 table.test { width: 80%; margin-left: 0; } <html> から書き始めていると、margin: auto;でセンタリングされないはずなのですが？
