こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

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;は無視されます。

スタイルシートでテーブルの位置を設定する方法をご教授ください。

投稿日時 - 2014-10-19 20:55:23

QNo.8796287

困ってます

このQ&Aは役に立ちましたか?

7人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

まず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 )
 絶対にマスターすべきです。

投稿日時 - 2014-10-20 10:24:37

ANo.1

左のマージンを無くせばいいだけです。

table.test {
width: 80%;
margin-left: 0;
}

<html> から書き始めていると、margin: auto;でセンタリングされないはずなのですが?

投稿日時 - 2014-10-19 23:18:09

あなたにオススメの質問