Horizontal (per-row) forms in a Django formset

Question

What's the Django way of presenting a formset horizontally, i.e. one row per form? The as_table method generates multiple forms vertically (with the labels). I need the form fields in table rows (one row per form) and the labels should be on top. I don't see anything out of the box. Is this discouraged for some reason?

I should clarify that I actually want a table, because of a UI table widget I'll be using. And that table should have the labels in the .

So my desired structure is:

<table>   <thead>      <tr><th>column1</th><th>column2</th></tr>   </thead>   <tbody>     <tr><td>form1.value1</td><td>form1.value2</td></tr> ...   </tbody> </table> 

Answer 1

You might want to try something like this http://www.djangosnippets.org/snippets/1442/

{{ formset.non_form_errors.as_ul }} <table id="formset" class="form"> {% for form in formset.forms %}   {% if forloop.first %}   <thead><tr>     {% for field in form.visible_fields %}     <th>{{ field.label|capfirst }}</th>     {% endfor %}   </tr></thead>   {% endif %}   <tr class="{% cycle row1 row2 %}">   {% for field in form.visible_fields %}     <td>     {# Include the hidden fields in the form #}     {% if forloop.first %}       {% for hidden in form.hidden_fields %}       {{ hidden }}       {% endfor %}     {% endif %}       {{ field.errors.as_ul }}       {{ field }}     </td>   {% endfor %}   </tr> {% endfor %} </table> 

Answer 2

I suggest using form.as_ul and styling it with your CSS to make it all on one row. You can do that with ul li { display: inline; } or of course, substitute a class or ID if you don't want to affect all ULs in that manner.

Here's the relevant section of the Django docs: http://docs.djangoproject.com/en/dev/topics/forms/#displaying-a-form-using-a-template

Edit: To address your need for a table, you'd like want to do something like this... edited some more.

It's difficult to put all of these forms in a table, and still have valid HTML. A form element can surround a table, or be inside a <td>... though this will likely still work.

<thead>   <tr>    {% for field in form %}      <th>{{ field.label }}</th>    {% endfor %}   </tr> </thead>  <tbody>  <tr class="table_row">   <form action="/something/" method="post">     {% for field in form %}       <td>        <table>         <tr><td>{{ field.label }}</td></tr>         <tr><td>{{ field }}</td></tr>        </table>       </td>     {% endfor %}    </form>   </tr>  </tbody>