- ベストアンサー
表の中でのフォーム
表の中で、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です。 ご存知の方は、よろしくおねがいします。
- みんなの回答 (4)
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
フォームタグが入ると、改行になるんです。 なので、フォームタグを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の記述的には間違いなんですけど、ブラウザ側では問題なく認識します。(^^;;
その他の回答 (3)
- danmarino
- ベストアンサー率63% (26/41)
失礼しました。私の書き方が舌足らずすぎました。 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の文法には合致してないですよね) やはりこのような方法しかないようですね。 もうしばらく、皆さんからの意見を待ってみて、締め切らせていただきます。 ありがとうございました。
- danmarino
- ベストアンサー率63% (26/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"なので(枠線が太くなったように見えてしまうから)あまりこの方法はおすすめできませんが何かの参考になれば。 ちなみに私はよく使っています。
補足
えーと、ちょっとやってみたのですが表示は改善されないように見えます。 何か間違っているのでしょうか? <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> あとこれだと、改行したい列は、改行されないようになってしまうのでしょうか?
フォームタグをテーブルタグの外側に出してしまえば良いかも。 <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ボタンは飛び先が違うので、テーブルタグの外に出すことができません。 ありがとうございました。
お礼
回答ありがとうございます。 文法を気にしてコーディングしていたので、そのような方法は思いつきませんでした。 一度試してみます。 他のプラットフォームで試してみると、Mac+IEではちゃんと表示されるんです。OS/2+NetScape4.6では、また違った感じで空白ができますね。 プラットフォーム、ブラウザで見栄えが違って困りますね。