views:

43

answers:

5

Hi,

I'm trying to create a table where each row is a form. I want that each input is in a different table division, but I still need that for example, all first inputs belong to the same table head and so on.

What I'm trying to do is an editable grid.

I dunno if I've explained myself, more or less this:

<table>
    <tr>
        <form method="GET" action="whatever">
            <td><input type="text"/></td>
            <td><input type="text"/></td>
        </form>
    </tr>
    <tr>
        <form method="GET" action="whatever">
            <td><input type="text"/></td>
            <td><input type="text"/></td>
        </form>
    </tr>
</table>

But apparently I cannot arrange the tags in that way (or so is what the w3c validator said).

Any good way to do this?

Kind regards.

+6  A: 

Tables are not meant for this, why don't you use <div>'s and CSS?

Harmen
Tables are not mean to represent tabular data? I'm trying to do an editable grid.
vtortola
I'm not sure a form counts as data. It will certainly never validate your way because there are specific limits as to what tags must / can follow a <table> or <tr> tag
Prescott
@vtortola the key word is "data". In your example, you are using it to control your input form layout NOT presenting data to the end user. Maybe if you explained what the purpose of the table is, it would be easier to recommend some alternatives.
Waleed Al-Balooshi
Editable data grid
vtortola
Most implimentations of editable grid's I've seen use a form wrapped around the table, and then each row might have a save button that will pass a key to the submit action (or use ajax and the form submit doesn't mean much anyway).
Prescott
You're *collecting* data, as I wrote it in my late answer. What you're after is `display: table-cell;`, too bad old IE are still around there ...
Felipe Alsacreations
+1  A: 

I second Harmen's div suggestion. Alternatively, you can wrap the table in a form, and use javascript to capture the row focus and adjust the form action via javascript before submit.

Prescott
+1  A: 

You may have issues with column width, but you can set those explicitly.

<table>
  <tr>
    <td>
       <form>
         <table>
           <tr>
             <td></td> 
             <td></td> 
             <td></td> 
             <td></td> 
             <td></td> 
             <td></td> 
           </tr>
         </table>
       </form>
     </td>
    </tr>
  <tr>
    <td>
       <form>
         <table>
           <tr>
             <td></td> 
             <td></td> 
             <td></td> 
             <td></td> 
             <td></td> 
             <td></td> 
           </tr>
         </table>
       </form>
     </td>
    </tr>
  </table>

You may want to also consider making it a single form, and then using jQuery to select the form elements from the row you want, serialize them, and submit them as the form.

See: http://api.jquery.com/serialize/

Also, there are a number of very nice grid plugins: http://www.google.com/search?q=jquery+grid&amp;ie=utf-8&amp;oe=utf-8&amp;aq=t&amp;rls=org.mozilla:en-US:official&amp;client=firefox-a

Eli
certainly answers the question - but damn that's ugly :)
Prescott
This is really horrible.
You
Yes, this question is probably a symptom of doing something the wrong way, but it seems like we should answer the question in addition to ragging on it.
Eli
-1 for showing someone how to do something *even more* incorrectly.
Stephen
Actually, this one is valid markup, much as I wouldn't use it.
Eli
A: 

Hi,

it's as simple as not using a table for markup, as stated by Harmen. You're not displaying data after all, you're collecting data.

I'll take for example the question 23 here: http://accessible.netscouts-ggmbh.eu/en/developer.html#fb1_22_5

On paper, it's good as it is. If you had to display the results, it'd probably be OK.
But you can replace it with ... 4 paragraphs with a label and a select (option's would be the headers of the first line). One paragraph per line, this is far more simple.

Felipe Alsacreations
I believe a grid generally both displays data AND allows for editing.
Eli
A table is complex stuff in HTML. A form too. I wouldn't try to play with both when there are simpler solutions, it's a recipe for having the worse of both worlds. And I'm not talking about a grid (the visual thing), there's (or should be) `display: table-cell;` for that but of the element table with its constraints in HTML.
Felipe Alsacreations
+4  A: 

If all of these rows are related and you need to alter the tabular data ... why not just wrap the entire table in a form, and change GET to POST (unless you know that you're not going to be sending more than the max amount of data a GET request can send).

(That's assuming, of course, that all of the data is going to the same place.)

<form method="POST" action="your_action">
<table>
<tr>
<td><input type="text" name="r1c1" value="" /></td>
<!-- ... snip ... -->
</tr>
<!-- ... repeat as needed ... -->
</table>
</form>
Sean Vieira
This is probably the best solution.
Stephen
If I understand you correctly, you're trying to make a datagrid, both to display existing data, and to enable editing / data entry. The best bet would be to use javascript to create and build this datagrid -- there are *many* good ones out there.
Sean Vieira