-1

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): LayoutExample 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.

Community
  • 1
  • 1
veljkoz
  • 8,384
  • 8
  • 55
  • 91

2 Answers2

3

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.

Jamie Treworgy
  • 23,934
  • 8
  • 76
  • 119
  • +1. Even though I prefer tables in these types of situations, I'll upvote you for giving him a complete table-less solution. – E.J. Brennan Jul 10 '11 at 15:14
  • I'm actually very guilty of completely abusing tables for form layout, I find it's often easier. But i think that something which looks like this - that is it may need nested tables or complex cell merges, the shine starts to dull. – Jamie Treworgy Jul 10 '11 at 15:15
  • This would be improved with ` – Quentin Jul 10 '11 at 16:20
  • @Quentin - yeah it was pretty quick and dirty. In my defense it only took me about 2 minutes :) I should probably have mentioned.. `
    ` is deprecated (and should be closed anyway), but its so much cleaner than `
    ` that I can't seem to let go. ``'s should be closed, and the markup would be a lot cleaner with a couple classes.     – Jamie Treworgy Jul 10 '11 at 16:26
  • This is the solution to my problems - as you've said the tables aren't good because there are many vertical alignments on the form which would make it pretty unusable for a table. great example btw! thx – veljkoz Jul 10 '11 at 22:40
-1

How about Table with 4 Rows and 7 Columns
and use corresponding colspan for better alignment.

Saanch
  • 1,814
  • 1
  • 24
  • 38