Question

I’ve been developing desktop aps, so my aspx/html got a bit rusty. What I need to do is layout an aspx page with fields that look something like this (there are many fields, this is just an abstraction):

Basically, the items look like they are in rows, but not in distinctive columns (e.g. in my example, street name doesn’t have to allign with street number etc…)

I want to achieve maximum compatibility with browsers – what would be best to use for this scenario? Tables, list items… divs? something else?

I’m using aspx C# 4.0.

Answer 1

Here’s a non-table example:

http://jsfiddle.net/eRY8T/7/

The conventional wisdom is that table should be used for displaying data in tabular format, not for laying out forms.

In practice I think it is sometimes easier to use tables for forms – but this is typically when your form looks like tabular data (e.g. one column for labels, another for inputs).

In your situation, I think using divs is actually easier than tables would be. This would probably require lots of rowspan/colspan/nested tables to get right.

The other advantage of using a CSS based layout over tables is that the tab order will probably make more sense. In the example, notice how tab goes through the first column then the 2nd one. In a table it would go through every input on a given row before moving to the next row.