フォームのレイアウト

質問

以下のようなフォームを作成しましたが、検索ボタンの下が妙に余っているのです。
これを上側と同じようにくっつけたいのですが、どうしたらよいでしょうか？
よろしくお願いします。

　<table border="1" width="200" border="0" cellspacing="0" cellpadding="2">
<tr><td>
<div align="center" valign="middle">
<form method="get" action="url" target="_blank">
<input name="sitem" type="text" id="inputbox" size="20"><BR>
<input name="Submit" type="submit" id="inputsubm" value="検索">
<input type="hidden" name="sv" value="6">
<input type="hidden" name="sid" value="12345">
<input type="hidden" name="su" value="bbb">
<input type="hidden" name="sn" value="aaa">
<input type="hidden" name="v" value="3">
</form></div>
</td></tr></table>

回答No.2

shadowdragon · ベストアンサー

こんにちわ。

formタグをtableの外側に持っていってみてください。
あと、hidden属性はsubmitより前に持っていきましょう。

<form method="get" action="url" target="_blank">
<table border="1" width="200" border="0" cellspacing="0" cellpadding="2">
<tr><td>
<input name="sitem" type="text" id="inputbox" size="20"><BR>
<input type="hidden" name="sv" value="6">
<input type="hidden" name="sid" value="12345">
<input type="hidden" name="su" value="bbb">
<input type="hidden" name="sn" value="aaa">
<input type="hidden" name="v" value="3">
<input name="Submit" type="submit" id="inputsubm" value="検索">
</div>
</td></tr></table>
</form>

お礼

回答ありがとうございます。
外側につけるんですね！なるほど勉強になりました。さっそく直しました。

回答No.1

preta

cssで→ form{ margin:0; padding:0; }
ブラウザのデフォルトのスタイルシートがformにもうけた余白を上書きすれば、余白が消えます。

ところで、どうしてもテーブルやdivを用いなくてはいけないのでしょうか？
少なからずこれは「表」ではないように見受けられます。

<style type="text/css">
form{
margin: 0; padding: 2px;
width: 200px;
border: 2px ridge #ccc;
text-align: center;
}
form p{
margin: 0; padding: 0;
}
</style>

<form method="get" action="url" target="_blank">
<p>
<input name="sitem" type="text" id="inputbox" size="20"><BR>
<input name="Submit" type="submit" id="inputsubm" value="検索">
<input type="hidden" name="sv" value="6">
<input type="hidden" name="sid" value="12345">
<input type="hidden" name="su" value="bbb">
<input type="hidden" name="sn" value="aaa">
<input type="hidden" name="v" value="3">
</p>
</form>

お礼

回答ありがとうございます。
このようにしてもできるんですね。
実はこれは仕事で使っているファイルでして、前任者の作成したものをいじっているものですから、大幅な改定はできない事情があるのです。
ちょっと理由は不明なのですが、ＣＳＳを使わずに、テーブルを入れ子にして１ｐｘのラインを作ったりしています。
（古いブラウザへの対応ということでしょうか）