2

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

<table>
   <thead>
      <tr><td><input type="text" /></td><td><input type="text" /></td></tr>
      <tr><td>Mother</td><td>Father</td></tr>
   </thead>
   <tbody id="search-results">
      <!-- to be populated by AJAX response -->
   </tbody>
</table>

Is the form element allowed like this?

<form>
  <thead>...</thead>
</form>

or

<thead>
  <form>...</form>
</thead>

or which way?

Also, can <input type="hidden" /> be place absolutely anywhere between the form tags?

3 Answers 3

3

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.

3

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.

0

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:

<table border="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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.