Posted by Ben C on 10/18/07 07:00

On 2007-10-18, Steve Swift <Steve.J.Swift@gmail.com> wrote:
>> change
>> <td>[history | <form>payment</form>]</td>
>> to
>> <td>[history | <form style="display:inline">payment</form>]</td>
>
> I've lost the beginning of this thread, so don't know the original question.
>
> Whenever I'm using a <FORM> inside a <TABLE> I always place the <FORM>
> inside the <TABLE> tag but *outside* any <TD></TD> or <TR></TR> constructs.

Please don't do that! It's invalid HTML. The browser has to guess what
you meant, somehow patch up the document tree, decide which controls are
to go in which forms, and if the result looks and works the way you
want, it's only because of a lot of luck.

It could all change tomorrow or be completely different in a browser you
haven't tested on.

You're not alone, I see a lot of web pages where people have done this
(and similar but worse things). Don't propagate the bad advice.

> I discovered (by trial and error)

Not always the best way to discover things.

> that placing the <FORM> inside one of
> your cells or rows would lead most browsers to dump some inexplicable
> extra space somewhere, usually at the end of the last cell on the first
> row.

It's not inexplicabe, it's just a bottom margin in the quirks mode
stylesheet put there probably for compatibility with older browsers.

Get rid of it with form { margin-bottom: 0 } as explained in an earlier
post.

See also http://www.cs.tut.fi/~jkorpela/forms/tables.html

[Back to original message]