Good Article for table less form design

Question

I need a good resource or walk through for designing a form without using tables.

I tried googling, but didn't find any useful resource.

Here in my form .. I have lot of sections each with it is own forms and each form has 2 or 4 columns..

I need a standard style sheet which can be helpful in implementing any kind of forms . In these kind of scenarios i feel HTML tables are more useful compared Divs with styles.

Any help greatly appreciated.

Regards, Kumar.

They *are* more useful in your situation. For anything other than 2-column scenarios, *don't* use `
`s. You will feel your life sucked from you as you decay while coding... — Blender, Dec 07 '11 at 17:41
That is terrible advice. What is this, 1999?! Don't use tables for layout! Ever! Even if it is 'easier' — danwellman, Dec 07 '11 at 17:44
@TerryR - Excellent post. Why was it closed? It needs to be re-opened. — gilly3, Dec 07 '11 at 19:32
@danwellman - No, it's not 1999, but it *is* semantically correct (arguably, at least). The real issue isn't whether tables should be used for layout (they shoudn't), but whether this content represents tabular data. If the columns all contain the same kind of thing, and the rows all correspond, I say it's tabular! — gilly3, Dec 07 '11 at 19:44
@gilly3 - I still disagree. For it to be definitively tabular data, it should be possible to reverse the axis and have the data still make sense. You should also be able to put sensible headings for both the rows and columns. Would you put row and column headings on a form? — danwellman, Dec 07 '11 at 21:51
@danwellman - Yes, I agree. If you can come up with sensible headings for your columns, that's a good indicator that the data is tabular. For a form, you could use "Field Name" and "Field Value" as column headers. But, I wouldn't use headers because, in this case, they are unnecessary. The meaning of the data in each column is self-evident. However, I disagree with adding headers to the rows. For example, if I were representing the data contained in a database table, My column headers would be maybe, "id", "name", "description", "created date", "updated date". What would my row headers be? — gilly3, Dec 07 '11 at 22:36
Row headers are less common than column headers of course, but it depends on the data and other relationships that may be evident. But even having column headings on a form displayed on a webpage is a rediculous idea. Show me one form that has column headings... — danwellman, Dec 08 '11 at 08:19
@danwellman - of course it's a ridiculous idea - that's why I said I wouldn't use them. Lot's of tables *could* have column headers but don't need them. Think of a phone book - do we really need "Name", "Address", and "Phone number" headers? I think we can figure out which is which. Or Newegg.com search results - we quickly identify which is the "product image", "product name/description", and "price" without the aid of column headers. — gilly3, Dec 08 '11 at 16:27
If adding column headings to a form is such a rediculous idea (which it is, you agree), why are you telling people to use tables to layout forms? Column headings on a form is rediculous, ergo using a table to layout a form is rediculous. You've made my point for me... — danwellman, Dec 08 '11 at 16:44
@danwellman - So, your contention is that the thing that makes data tabular is if the *UI* should render column headers? Really? Now you are using the UI elements to define the semantics of the underlying data. Should a phone directory not use a table because it lacks column headers? What about a table of contents? Take a look at your SO user profile summary. That list of Accounts is four column table - "Site icon", "Site name", "Reputation", and "Badges". It lacks column headers. Is *that* data also not tabular? — gilly3, Dec 08 '11 at 16:58
@danwellman - My definition of tabular data is data that could reasonably be stored in a database table. I have certainly stored key/value pairs in a database table. — gilly3, Dec 08 '11 at 17:03
No, I said nothing about how a UI should render column headings, my point is that tabular can sensibly have column headings. Forms cannot sensibly have column headings === form. Elements. Are. Not. Tabular. Data. The fact that you agree that you would not put column headings on a form tells me that you are not using a table to lay out form elements because it is *semantically* correct, but because *it is easier*. — danwellman, Dec 08 '11 at 17:47
@danwellman - Yes you did: "Column headings ... is rediculous, ergo using a table ... is rediculous". And again just now you inferred that if you would not put column headings, then using a table would be semantically incorrect. By that logic, any table without column headings is not actually a table. But, a column heading is a **UI element**. And *many* tables do not need column headings because they are obvious. See the examples I posted above. Are those not semantically tables? The presence or absence of a column heading in the UI does not indicate whether data is tabular. — gilly3, Dec 08 '11 at 18:19
Can you not see? The lack of column headings does not indicate that a table does not contain tabular data. *But the fact that you would not put column headings on something at all **does** indicate that the data is not tabular.* Yes column headings are optional. But where *you explicitly would not use them* (such as on a form) DOES indicate the data is not tabular. — danwellman, Dec 08 '11 at 18:54
@danwellman - So a phone directory, a table of contents, search results on newegg.com, and the accounts list on your SO profile summary all are not tabular because I would explicitly not use column headers? — gilly3, Dec 08 '11 at 19:04
You're not getting it. Just because you don't *want* to use column headings on the things you have specified doesn't affect our argument and doesn't prove your point. You *could* use column headings on them and it would make sense. You couldn't use column headings on a form - we've already established that it would be ridiculous. That is the difference. — danwellman, Dec 08 '11 at 23:28

score 3 · Answer 1 · answered Dec 07 '11 at 17:42

The articles on A List Apart are usually a cut above the rest.

This one on Prettier Accessible Forms covers what you want to do I think. Or at least the principles it introduces should extend to achieve it. Note that the form fields are contained within the elements of an ordered list which as the author notes is a semantically appropriate approach.

gilly3 · Answer 2 · 2011-12-08T18:47:18.160

Use tables. ^{That's right! Bring on the downvotes! :-)}

Tables are for tabular data. Tabular data is typically when cells have the same kind of data as other cells in in the same column, and related data for cells in the same row (or vice versa). If you have a form like:

  First name:  |___________|
   Last name:  |___________|

Can't we make that look more like tabular data by adding column headings:

╔═════════════╦═════════════╗
║ Field Name  ║ Field value ║
╠═════════════╬═════════════╣
║ First name: ║ |_________| ║
╠═════════════╬═════════════╣
║  Last name: ║ |_________| ║
╚═════════════╩═════════════╝

Since the columns are the same type: labels and inputs, and the rows relate: labels correspond to fields, then this is tabular data! Use a table! Hooray, how easy! (but leave out the column headings and borders, of course – they were just for illustration)

The tables for layout issue really comes into play when you have only a single row. Ie, you are trying to create columns:

╔══════════════════╦═════════════════════════════╦══════════════╗
║ Left column      ║ Center column               ║ Right column ║
║                  ║                             ║              ║  ◄── Only one row
║                  ║                             ║              ║
╚══════════════════╩═════════════════════════════╩══════════════╝

Or when your tables are riddled with rowspans and colspans and nested tables. This is usually a pretty good sign that you are using tables for layout.

╔════════════════════════════════════════════════════════════════════╦════════════════╗
║                                                                    ║ User name      ║
║                  Page Header (colspan=3, rowspan=2)                ╠════════════════╣
╠═════════════════╦════════════════════════════════════════════╦═════╩════════════════╣
║ Nav (rowspan=2) ║ Content                                    ║ Side bar (colspan=2) ║
║                 ║                                            ║                      ║
║                 ║                                            ║                      ║
║                 ║                                            ║                      ║
║                 ║                                            ║                      ║
║                 ║                                            ║                      ║
║                 ║                                            ║                      ║
║                 ║                                            ║                      ║
║                 ║                                            ║                      ║
║                 ║                                            ║                      ║
║                 ╠════════════════════════════════════════════╩══════════════════════╣
║                 ║              Footer (colspan=3)                                   ║
╚═════════════════╩═══════════════════════════════════════════════════════════════════╝

^{(This was actually how we did it in 1998 - back in the IE4/NS4 days. Yikes!)}

But if you are presenting a grid where columns always need to line up and rows always need to line up, chances are you are presenting tabular data. A table may be appropriate in this case.

If you have 4 columns, I'm guessing you've got two columns of fields and inputs:

  First name:  |___________|        Phone number:  |___________| 
   Last name:  |___________|       Email address:  |___________|

In this case, use two tables. Otherwise you would be using tables for layout, because all the cells in the row wouldn't correspond to each other.

╔═════════════╦═════════════╗    ╔════════════════╦═════════════╗
║ First name: ║ |_________| ║    ║ Phone number:  ║ |_________| ║
╠═════════════╬═════════════╣    ╠════════════════╬═════════════╣
║  Last name: ║ |_________| ║    ║ Email address: ║ |_________| ║
╚═════════════╩═════════════╝    ╚════════════════╩═════════════╝

LOL. I didn't think I'd actually get any down votes! Is it because you don't believe that this data qualifies as tabular, or because you don't believe in using tables ever, even if it is tabular data? — gilly3, Dec 07 '11 at 21:47
I don't belive this data qaulifies as tabular. A form does not display data, it receives data in the form of user input. You want a tidy layout where the 'rows' of a form (corresponding labels and inputs) are in neat columns. That is using tables for layout, regardless of how related the inputs are or how similar they are. It's layout plain and simple. — danwellman, Dec 08 '11 at 08:23
@danwellman - No one ever said that tables don't provide layout. If they didn't what use would they be? Tables are used to lay out tabular data in a grid. — gilly3, Dec 08 '11 at 16:35
There is a big difference between using the layout implicitly provided by tables to display data, and using a table to layout the elements on your page — danwellman, Dec 08 '11 at 16:39
@danwellman - We're on the same page here. I certainly do not advocate for "using a table to layout the elements on your page". My only contention is that a form, rendered as a grid of labels and inputs, is arguably tabular. (And that user input *is* data - think of a spreadsheet.) — gilly3, Dec 08 '11 at 16:45
Same page maybe, but the book appears to be written in different languages. A form is not a spreadsheet. The input may *become* tabular data if you choose to display a table containing all your the bits of information you have collected from each person. But what the data becomes after the user has entered it is not the same as what the form that captures the data in the first place is. — danwellman, Dec 08 '11 at 17:50

score 0 · Accepted Answer · answered Dec 07 '11 at 17:43

With regard to a maintainable, easy to use CSS system for creating layouts with variable numbers of columns, I would recommend using something like the 960 grid system, or blueprint - one of the better known, mature CSS frameworks.

Using tables for layout really went out of fashion a long time ago. Don't use tables for anything other than tabular data. Not layout. Certainly not forms ;)

score -1 · Answer 4 · answered Dec 07 '11 at 17:43

Take a look at the following resources:

http://www.1stwebdesigner.com/css/51-form-element-resources-and-tutorials-using-css-and-javascript/

http://www.bitrepository.com/how-to-create-a-tableless-form.html

http://aceinfowayindia.com/blog/2009/06/how-create-good-looking-form-without-table/

Not sure if is what you are looking for, but it might help!

Good Article for table less form design

4 Answers4