テーブル内のプルダウンの下に余白ができてしまう

解決済

質問者：buttero
質問日時：2014/05/22 18:25
回答数：2件

以下のようなHTMLにて、プルダウンメニューの下になぜか余白ができてしまいます。
この余白部分を消すにはどうしたらよいでしょうか？
padding-bottomを使うのかといろいろ試していますが、解決できません。
どなたかご教授いただけますと幸いです。

<html>
<body>

<table border='1'>
<tr>
<td>
コンテンツから探す
</td>
</tr>
<tr>
<td>
<form>
<select onChange="top.location.href=value">
<option value="#"></option>
<option value="page1.html">ページ１</option>
<option value="page2.html">ページ２</option>
<option value="page3.html">ページ３</option>
</select>
</form>
</td>
</tr>
</table>

</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.1ベストアンサー

回答者： ORUKA1951
回答日時：2014/05/22 18:42

table全体をformで囲えばよい。

それよりも・・・
tableをデザインには使用しない。これは基本です。
・単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
・ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

　また、ナビゲーションにjavascriptを使いません。
『JavaScript、Cookie、セッション ID、フレーム、DHTML、Flash などの特殊な機能が使用されているためにサイトの一部がテキストブラウザで表示されない場合、検索エンジンのスパイダーがサイトをうまくクロールできない可能性があります。( https://support.google.com/webmasters/answer/357 … )』

　普通に
<div class="nav">
　<ol>
　　<li><a href="./page1.html">ページ1</a></li>
　　<li><a href="./page2.html">ページ2</a></li>
　　<li><a href="./page3.html">ページ3</a></li>
　</ol>
</div>
のように、DIVに「id属性及び class属性と併用することで、文書に構造を付加( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」してナビゲーションリストだと示して、スタイルシートでプルダウンメニューにデザインしましょう。
　HTML5だと
<nav>
　<ol>
　　<li><a href="./page1.html">ページ1</a></li>
　　<li><a href="./page2.html">ページ2</a></li>
　　<li><a href="./page3.html">ページ3</a></li>
　</ol>
</nav>
になります。