Complicated form table vs div

Question

I looked online for examples of implementation of the form using DIVs and all I see is pretty simple one column forms. I have some pretty complicated forms, here is a picture of one:

http://img835.imageshack.us/img835/8292/formn.jpg

It is easy to make it work with table (which I do), the only problem I have is that sometimes I need to not display some of the choices and move the values up one row to avoid gaps.

I started making some forms using divs, but they fall apart when I change the browser window size and it is not easy to align things.

This topic is helpful: http://stackoverflow.com/questions/109488/is-it-bad-design-to-use-table-tags-when-displaying-forms-in-html but it doesn't address some of the concerns I have.

What would you propose as a solution? I can dynamically delete/insert values in the table or try to do the DIVs.

Answer 1

I would go the div route. As long as you're careful of your widths when you apply floats, it's actually pretty straightforward to get the layouts to work properly in different screen resolutions.

Here are a few rules:

1. Set a max width on your form or your form's wrapper element. If you want to float elements on one row make sure their width's added together does not exceed this width.
2. If you are adding horizontal padding/margins to your floated elements remember that these add to the total width of the element.
3. Avoid mixing percentage widths with pixel padding and margins. Apply the percentage width to a parent element and the pixel padding/margins to a child element.
4. Use clearing elements between your rows of elements to keep everything in line.

As to the markup, you can use the form elements along with CSS to create a semantic structure:

<fieldset>
    <legend>Fieldset Title</legend>

    <label for="input1">Input 1:</label>
    <span><input type="text" id="input1" name="input1"/></span>
    <label for="input2">Input 2:</label>
    <span><input type="text" id="input2" name="input2"/></span>

    <br/>

    <label for="input3">Input 3:</label>
    <span><input type="text" id="input3" name="input3"/></span>
    <label for="input4">Input 4:</label>
    <span><input type="text" id="input4" name="input4"/></span>
</fieldset>

And the CSS:

fieldset {
    padding: 20px 0;
    width: 600px;
    margin: 0;
    border: 0;
}

legend {
    display: block;
    width: 100%;
    background: black;
    color: white;
}

label, span{
    float: left;
    width: 150px;
}

input {
    width: 120px;  
}

br {
    clear: both;  
}

You can see the result here.

Answer 2

If it is a fixed-width table, it's trivial to lay out with divs and floats. Just set each width to exactly what you want.

For a liquid-layout table—and liquid layout is in general highly desirable—it is much harder to arrange a form without table-style-display, because float and position do not readily allow for calculations like “this cell is half the remaining width of the parent, after the fixed-width labels have been allocated”.

So in cases like this, which certainly includes the kind of two-column form you posted, the table-* CSS display values are your only possibility. If you are aiming only at IE8 and the other modern browsers, you can use divs and set display: table-row et al in the stylesheet. However for compatibility with IE6-7 and other older/mobile/niche browsers, you will have to use actual <table>/<tr>/<td> elements, as only the modern browsers support table-CSS independently of the table-elements.

There is no shame in this. A form is kind-of semi-tabular anyway and there is no practical accessibility disadvantage because the page content remains ordered appropriately.

Note: for liquid-layout forms you also have the issue of sizing input fields to match the parent element. input { width: 100%; } almost does it, but not quite, because the width is not including the border or padding that inputs get by default. You can use CSS3 box-sizing and the browser-specific versions of it to get around that for modern browsers, but if you want it to line up exactly to the pixel on IE6-7 too you would have to use padding on the parent elements equal to the border/padding on the child input field.

Answer 3

• General information is some kind of list, key > value list to be exact - <dl /> would be probably the best structure for it
• Issues values is a table,
• Ratings is a table,
• Both Redemption and Indicators are lists - unordered lists <ul />