Where Are The Form Elements Allowed Within A Table Element?

Question

I want to create a table with search textbox above the column headings as such

Solution 1:

You should wrap the entire <table> element in <form>, you cannot put anything which is not table related inside <table> except for inside <th>, <td> and <caption> elements. So if you do not want to put the entire form in a <td> cell, you should wrap the entire table in <form>.

<input type="hidden"> tags are just like any other input tags - they must be wrapped inside <td> and other content tags.

Solution 2:

Inside a table, a <form> can only be where content goes inside the table which would be inside a <td>, <thead>, <tfoot>, <th> or <caption>. Or the entire table can be inside the <form>, but not either of the ways you show it.

You can also use form elements like <input> tags or other form elements in any <td> without enclosing them in a <form> if you aren't using the built-in form submission capabilities.

Solution 3:

This is the specification on html5, you will find out that only form embedded into a table is allowed here

This is the correct form of using thead : thead tutorial.

The below content is copied from that link to preserve the answer if the link gets discarded:

If you want, you can leave your tables like this, but if you appreciate content that are highly semantically structured I am glad to introduce you to the element. The element structures the headings in your table and this tells browsers what e.g. each column contains. The element structures all of the content, so that the browser knows what the actual content of the table is. Using the same example as before, the and the elements are to b used like this:

<tableborder="1"width="100%"><thead><tr><td>Row 1, cell 1</td><td>Row 1, cell 2</td><td>Row 2, cell 3</td></tr></thead><tbody><tr><td>Row 2, cell 1</td><td>Row 2, cell 2</td><td>Row 2, cell 3</td></tr><tr><td>Row 3, cell 1</td><td>Row 3, cell 2</td><td>Row 3, cell 3</td></tr><tr><td>Row 4, cell 1</td><td>Row 4, cell 2</td><td>Row 4, cell 3</td></tr></tbody></table>

Also you can use hidden input anywhere in the form tag.

Html5 Academy

Where Are The Form Elements Allowed Within A Table Element?

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "Where Are The Form Elements Allowed Within A Table Element?"