• ベストアンサー

表の中でのフォーム

表の中で、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です。 ご存知の方は、よろしくおねがいします。

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

  • ベストアンサー
noname#1785
noname#1785
回答No.2

フォームタグが入ると、改行になるんです。 なので、フォームタグを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の記述的には間違いなんですけど、ブラウザ側では問題なく認識します。(^^;;

msystem
質問者

お礼

回答ありがとうございます。 文法を気にしてコーディングしていたので、そのような方法は思いつきませんでした。 一度試してみます。 他のプラットフォームで試してみると、Mac+IEではちゃんと表示されるんです。OS/2+NetScape4.6では、また違った感じで空白ができますね。 プラットフォーム、ブラウザで見栄えが違って困りますね。

その他の回答 (3)

  • danmarino
  • ベストアンサー率63% (26/41)
回答No.4

失礼しました。私の書き方が舌足らずすぎました。 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>

msystem
質問者

お礼

追回答ありがとうございます。 できました。 ですが、これもformタグをtdやthの外に出すタイプなのですね。(これは厳密にはHTMLの文法には合致してないですよね) やはりこのような方法しかないようですね。 もうしばらく、皆さんからの意見を待ってみて、締め切らせていただきます。 ありがとうございました。

  • danmarino
  • ベストアンサー率63% (26/41)
回答No.3

ちょっと裏技的ですが、 <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/
msystem
質問者

補足

えーと、ちょっとやってみたのですが表示は改善されないように見えます。 何か間違っているのでしょうか? <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> あとこれだと、改行したい列は、改行されないようになってしまうのでしょうか?

noname#225520
noname#225520
回答No.1

フォームタグをテーブルタグの外側に出してしまえば良いかも。 <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>

msystem
質問者

お礼

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

関連するQ&A