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

2023/11/01 14:23

このQ&Aのポイント

以下のHTMLにて、プルダウンメニューの下に余白ができる現象が発生しています。
padding-bottomを使用しても解決できず、どのように対処すれば良いかわかりません。
解消方法についてのアドバイスをいただけると助かります。

ベストアンサー

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

2014/05/22 18:25

以下のような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>

buttero
お礼率75% (30/40)

HTML
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/05/22 18:42 回答No.1

table全体をformで囲えばよい。それよりも・・・ tableをデザインには使用しない。これは基本です。・単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 ) ・ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) 　また、ナビゲーションにjavascriptを使いません。『JavaScript、Cookie、セッション ID、フレーム、DHTML、Flash などの特殊な機能が使用されているためにサイトの一部がテキストブラウザで表示されない場合、検索エンジンのスパイダーがサイトをうまくクロールできない可能性があります。( https://support.google.com/webmasters/answer/35769?hl=ja#2 )』　普通に <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-html401j/struct/global.html#h-7.5.4 )」してナビゲーションリストだと示して、スタイルシートでプルダウンメニューにデザインしましょう。　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> になります。

質問者

お礼 2014/05/23 22:04

table全体をformで囲って解決しました。ありがとうございます。また、追加アドバイスありがとうございます。文書内容を整形する目的だけで表を使いまくっていましたので、早速片っ端から整理していこうと思います。スタイルシートでプルダウンにデザインできるんですね。もっと勉強します。

その他の回答 (1)

t_ohta
ベストアンサー率38% (5072/13251)

2014/05/22 18:47 回答No.2

質問者

お礼 2014/05/23 21:56

ありがとうございます。ご指摘のシンプルな方法でも解決できました。

関連するQ&A

テーブル内でドロップダウンメニューを使った際の行間
テーブルの中に配置したフォーム（ドロップダウンメニュー）の下に無用な空白ができてしまい，このままだとレイアウトが崩れて困っています．文末のHTMLソースをそのままIE6で表示いただくとご理解いただけると思います． <select size="1">としても改善しないため， <body>，<table>，<tr>，<td>，<form>などへ，CSS で， height で小さい数値を入れたり，line-height で行間詰めを試みても改善せず．これはもう仕方ないでしょうか？よろしくお願い致します。 <html> <head><title></title></head> <body> <table border="1"> <tr> <td> <form> <select onchange="location=this.options[this.selectedIndex].value"> <option>選択</option> <option value="1ndex.htm">1 <option value="2frame.htm">2 </select> </form> </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
プルダウンメニューの利用
htmlのプルダウンメニューを使用した値計算のインタフェースを作成したいと思っています。プルダウンメニューに設定するメニュー項目に値を設定し、 onChangeを使用して、その値だけをPHPプログラムに渡すようにしたいのですが、 JavaScript部分をどのように書けばいいのか判りません。どなたかご教授お願いいたします。 <form name="formtest" action="test.php" method="post"> <table> <tr> <th>カテゴリ*</th> <td> <SELECT NAME="iPlanet" onchange=""> <OPTION VALUE="9" selected>初期値 <OPTION VALUE="0">サンプル1 <OPTION VALUE="1">サンプル2 </SELECT> </td></tr> </table> </form> onchangeでValueの値をPHPに送りたいのです。よろしくお願いします。
- ベストアンサー
- JavaScript
HTML教えて下さい！！！！
セレクトメニューで別ウィンドウを開きたいのですが出来ません。教えてください！！よろしくおねがいします。 <tr> <td> <select size="1" onchange="location.href = this.options[selectedIndex].value"> <option value="../○○○/○○○/index.html" selected>●●●●●</option> <option value="../○○○/○○○/index.html" >●●●●●</option> <option value="../○○○/○○○/index.html">●●●●●A</option> </select> </form></td> </tr> で、ブランクを入れてみたのですが、、、 <tr> <td> <select size="1" onchange="location.href = this.options[selectedIndex].value"> <option value="../○○○/○○○/index.html" target="_blank" selected>●●●●●</option> <option value="../○○○/○○○/index.html" target="_blank">●●●●●</option> <option value="../○○○/○○○/index.html" target="_blank">●●●●●</option> </select> </form></td> </tr> 、、、、ダメでした。間違っているんですよね。。。よろしくお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
プルダウンによる表示制御方法
プルダウンの選択内容による表示の切り替えを行いたいです。例えば、AとCを選択すると下にあるテキストボックスが非表示になり Bを選択するとテキストボックスが表示するように制御を行いたいです。 <table align="center" border="0" cellpadding="0" cellspacing="0"> <tr><td> <form name="a"> <SELECT NAME="b"> <OPTION SELECTED> <OPTION VALUE="0">A <OPTION VALUE="1">B <OPTION VALUE="2">C </SELECT> </td></tr> <tr><td> <input type="text" size="6" maxlength="5" name="text1" value=""> </td></tr> </form> </table></form></td></tr></table> すみませんが、よろしくお願い致します。
- ベストアンサー
- HTML
プルダウンで・・・???
<FORM> <SELECT onchange="location=this.options[this.selectedIndex].value"> <OPTION value="">-----メニュー----- </OPTION> <OPTION value="index.html">TOP </OPTION> <OPTION value="">---------- </OPTION> <OPTION value="内緒・・・">BBS </OPTION> <OPTION value="">---------- </OPTION> </SELECT> </FORM> とした場合 -------- の部分をクリックすると変なページにとびますなんかファイルの一覧みたいな・・・　クリックしてもなにもおこらないようにまたはクリックができないようにするにはどうすればいいのですか?
- ベストアンサー
- HTML
プルダウンの選択値により活性・非活性化したい
プルダウンの選択値によりその他のプルダウンメニューやテキストエリアを活性・非活性化したいです。下記の例では「OS」のプルダウンが「Windows」と選択されたならば、「Windowsのバージョン」のプルダウンや「Windowsのサービスパック」のテキストエリアを活性化させ、OSのプルダウンがWindows以外ならば非活性化させたいのですが、どのようにすれば実現可能でしょうか <html> <head> </head> <body> <table> <tr> <td>OS</td> <td><select id="IDOS"> <option value="">-</option> <option value="Windows">Windows</option> <option value="Mac">Mac</option> <option value="Linux">Linux</option></select> </td> </tr> <tr> <td>Windowsのバージョン</td> <td><select id="IDVersion"> <option value="">-</option> <option value="XP">XP</option> <option value="Vista">Vista</option> <option value="7">7</option></select> </td> </tr> <tr> <td>Windowsのサービスパック</td> <td><input type="text" value="" size="30"> </td> </tr> </table> </body> </html> 
- ベストアンサー
- JavaScript
セレクトメニューで
セレクトメニューでフレームを使った、複数のセレクトメニューで今の状態だと、上のセレクトメニューは問題ないのですが下のセレクトメニューで選択すると、上のセレクトメニューの「更新」になるだけになってしまいます。要所の所だけ、記載しますので間違ってるところを教えてください。 <script type="text/javascript">  </script> </head> <body> <TABLE border="0"> <TBODY> <TR> <TD><form action="#" name="form1"> <select name="select1" onChange="jump()"> <OPTION>　　メニュー</OPTION> </select> </form></TD> </TR> <TR> <TD><form action="#" name="form2"> <select name="select2" onChange="jump()"> <OPTION>　　メニュー</OPTION> </select> </form></TD>
- 締切済み
- JavaScript
テーブルの幅　余白をなくすことは可能ですか？
<html> <head> <title>test</title> </head> <style type="text/css"> table { width: 100%; } </style> <body> <table border=1> <tr><th>a</th><th>b</th></tr> <tr><td>1</td><td>2</td></tr> </table> </body> </html> のようにテーブルの幅を１００％にしても両端に余白が出来てしまいますがこの余白をなくすことは可能ですか？添付画像はIEで表示させた状態ですがファイアフォックスなど他のブラウザで表示させても余白が出来ます。
- ベストアンサー
- HTML
セレクトボックスの内容を次のページで受け取る方法
<form action="./check.asp" method="POST"> <table> <tr> <td> <select name="year"> <option value="2006" >2006</option> <option value="2007" >2007</option> <option value="2008" >2008</option> </select> </td> </tr> <tr> <td align="center"><input type="submit" value="確認する"></td> </tr> </table> </form> として次のページで YEAR =Trim(request("year")) Response.Write YEAR で受け取り表示しようとしていますが取れません。なぜですか？教えてください
- ベストアンサー
- Microsoft ASP
SelectBoxで、もう一つのSelectBoxを制御する方法
自動車メーカーのselectboxがあり、選択したメーカーにより二つ目の車名のselectboxの表示名が変わる。トヨタ→カローラ、プリウス日産→マーチホンダ→アコード、フィットそして、「登録」をクリックすると選択された自動車メーカーと車名のvalueがサーバーに送信される。 function company_onchange(){}の中で制御文を書くと思うのですが具体的にどのように書けばよいのか分かりません。ご教授頂けたらと思います。宜しくお願い致します。 <script language="javascript"> function company_onchange(){ } </script> <form name="RegisterForm" method="post" action="/car/RegisterAction.do" target="body"> <table> <tr> <td colspan="2">自動車メーカー <select name="companyCd" onchange="company_onchange(form);"> <option value="100">トヨタ </option> <option value="200">日産 </option> <option value="300">本田 </option> 　 </select> </td> <td colspan="2">車名　　　　　 <select name="carName"> <option value="10000">カローラ</option> <option value="10003">プリウス</option> <option value="20002">マーチ</option> <option value="30001">アコード</option> <option value="30002">フィット</option> </select> </td> </tr> </table> <input type="submit" name="action" value="登録"> </form>
- ベストアンサー
- JavaScript