表の中でのフォーム

表の中で、Submitボタンを使いたいのですが、表示するとどうしてもボタンがセルの上付きになってしまいます。ついでにセルの縦方向のサイズが、2行分になってしまいます。
何とかならないのでしょうか？

たとえばのソースは以下のとおりです。

<table border="1" cellpadding="0" align="center">
　<tr>
　　<td align="center">
　　　<form method="POST" action="123">
　　　　<input type="submit" value="編集">
　　　</form>
　　</td>
　　<td align="center">
　　　<form method="POST" action="123">
　　　　<input type="submit" value="削除">
　　　</form>
　　</td>
　</tr>
</table>

クライアントは、WindowsNT、IE4.0です。

ご存知の方は、よろしくおねがいします。

No.2 ベストアンサー 回答者： noname#1785 回答日時： 2001/07/13 11:50

フォームタグが入ると、改行になるんです。

なので、フォームタグをTDまたはTRタグの外に出すと、改行されません。

<table border="1" cellpadding="0" align="center">
　<tr>
　　<form method="POST" action="123">
　　<td align="center">
　　　<input type="submit" value="編集">
　　</td>
　　</form>
　　<form method="POST" action="123">
　　<td align="center">
　　　　<input type="submit" value="削除">
　　</td>
　　</form>
　</tr>
</table>

HTMLの記述的には間違いなんですけど、ブラウザ側では問題なく認識します。(^^;;

この回答へのお礼

回答ありがとうございます。

文法を気にしてコーディングしていたので、そのような方法は思いつきませんでした。
一度試してみます。

他のプラットフォームで試してみると、Mac+IEではちゃんと表示されるんです。OS/2+NetScape4.6では、また違った感じで空白ができますね。

プラットフォーム、ブラウザで見栄えが違って困りますね。

お礼日時：2001/07/13 13:09

No.4 回答者： danmarino 回答日時： 2001/07/13 22:11

失礼しました。

私の書き方が舌足らずすぎました。
FORMタグのみを格納した空行を作りその行に対してheight=1を設定してあげるのです。
<TABLE BORDER="1" CELLPADDING="0" ALIGN="center">
<TR HEIGHT=1><TD><FORM METHOD="POST" ACTION="123"></TD></TR>
<TR><TD ALIGN="center"><INPUT TYPE="submit" VALUE="編集"></TD></TR>
<TR HEIGHT=1><TD></FORM></TD></TR>
</TABLE>

ご質問のソースではformタグが二つありますので、上のように記述したものをTABLEタグの入れ子のしてあげれば解決すると思います。
<TABLE BORDER="1" CELLPADDING="0" ALIGN="center">
<TR>
<TD>
<TABLE BORDER="0" CELLPADDING="0">
<TR HEIGHT=1><TD><FORM METHOD="POST" ACTION="123"></TD></TR>
<TR><TD ALIGN="center"><INPUT TYPE="submit" VALUE="編集"></TD></TR>
<TR HEIGHT=1><TD></FORM></TD></TR>
</TABLE>
</TD>
<TD>
<TABLE BORDER="0" CELLPADDING="0" ALIGN="center">
<TR HEIGHT=1><TD><FORM METHOD="POST" ACTION="123"></TD></TR>
<TR><TD ALIGN="center"><INPUT TYPE="submit" VALUE="削除"></TD></TR>
<TR HEIGHT=1><TD></FORM></TD></TR>
</TABLE>
</TD>
</TR>
</TABLE>

この回答へのお礼

追回答ありがとうございます。
できました。

ですが、これもformタグをtdやthの外に出すタイプなのですね。（これは厳密にはHTMLの文法には合致してないですよね）

やはりこのような方法しかないようですね。
もうしばらく、皆さんからの意見を待ってみて、締め切らせていただきます。

ありがとうございました。

お礼日時：2001/07/16 11:27

No.3 回答者： danmarino 回答日時： 2001/07/13 15:41

ちょっと裏技的ですが、

<table border="1" cellpadding="0" align="center">
　<tr height=1>
　　<td align="center">
　　　<form method="POST" action="123">
　～
のように<TR>タグにheight=1を指定するとほとんど改行していないように見えます。
上の場合はtable border="1"なので（枠線が太くなったように見えてしまうから）あまりこの方法はおすすめできませんが何かの参考になれば。
ちなみに私はよく使っています。

参考URL：http://www.kamakuratoday.com/

この回答への補足

えーと、ちょっとやってみたのですが表示は改善されないように見えます。
何か間違っているのでしょうか？

<table border="1" cellpadding="0" align="center">
　<tr height=1>
　　<td align="center">
　　　<form method="POST" action="123">
　　　　<input type="submit" value="編集">
　　　</form>
　　</td>
　　<td align="center">
　　　<form method="POST" action="123">
　　　　<input type="submit" value="削除">
　　　</form>
　　</td>
　</tr>
</table>

あとこれだと、改行したい列は、改行されないようになってしまうのでしょうか？

補足日時：2001/07/13 18:17

No.1 回答者： Min_2 回答日時： 2001/07/13 11:38

フォームタグをテーブルタグの外側に出してしまえば良いかも。

<form method="POST" action="123">
<table border="1" cellpadding="0" align="center">
　<tr>
　　<td align="center">
　　　<input type="submit" value="編集">
　　</td>
　　<td align="center">
　　　<input type="submit" value="削除">
　　</td>
　</tr>
</table>
</form>

この回答へのお礼

回答ありがとうございます。

私の例のソースが悪かったです。
実は、「編集」Submitボタンと「削除」Submitボタンは飛び先が違うので、テーブルタグの外に出すことができません。

ありがとうございました。

お礼日時：2001/07/13 13:02