How Do I Format a HTML Form Without Using Tables

+12 A:

http://www.quirksmode.org/css/forms.html has an example that I've adapted and used before.

KernelM 2008-10-07 18:55:41

Thank you so much, this is just what I needed.

Pablo Fernandez 2008-10-07 19:02:10

The link does not exist anymore. Has it moved or is the answer outdated?

Roalt 2010-02-05 10:27:21

The answer if from Oct 7 2008. So yes, it is outdated. -_-

elvispt 2010-09-24 12:04:31

A:

I would lookup using the div tag to layout data on a page.

Tables are still very much useful for tabular data, but its frowned upon for laying out a page.

View source here on stackoverflow.com, there's probably some good examples.

Doug T. 2008-10-07 18:55:42

hmm .... page source on SO looks to have lots of tables. :)

Carlton Jenke 2008-10-07 19:02:47

+1 A:

Take a look here:

Milan Babuškov 2008-10-07 18:55:44

A:

Think about putting field names above the field, rather than beside. I find this works about the best.

Cory Dee 2008-10-07 18:55:44

When done right, this makes forms infinitely more readable as your eyes only have to move in one direction instead of scanning back and forth.

John Sheehan 2008-10-07 19:17:53

It doesn't work very well though for complex forms. For me, it just forced me to simplify the forms, which is never a bad thing.

John Sheehan 2008-10-07 19:18:27

We don't always have the luxury of specifying the design, unfortunately.

Andrew Hedges 2008-10-07 20:14:17

+2 A:

Take a look at the code used in wufoo forms, they use ul's to format the forms and they look really good.

Todd 2008-10-07 18:59:30

+6 A:

Nick Rigby wrote an excellent article for A List Apart titled Prettier Accessible Forms

Uses fieldset, legend, label. Highly semantic.

Shawn Miller 2008-10-07 19:04:30

ansaurus