[OT] Tables VS divs for form layout

I’ve been using tables to get my forms to line up. ( I have usually one
column for labels, and a column for values ). Should I be using divs
instead? I’ve been reading some CSS design books lately. They tend to
recommend divs over tables for general page layout stuff. But, what
about
the forms elements? What’s the ‘best practice’ in this regard?

On 6/15/06, Larry K. [email protected] wrote:

I’ve been using tables to get my forms to line up. ( I have usually one
column for labels, and a column for values ). Should I be using divs
instead? I’ve been reading some CSS design books lately. They tend to
recommend divs over tables for general page layout stuff. But, what about
the forms elements? What’s the ‘best practice’ in this regard?

Depends on who you ask. I think most developers these days will tell
you to go with CSS instead of tables, but there are a few who think
the label/field relationship is table-like enough to justify that
structure.

So, go with whatever makes you happy. Personally, I use CSS for forms
(usually with the tag). It’s easy, flexible, and doesn’t
require a bunch of extra markup.

This article at A List Apart is a good starting point for CSS forms:

Good luck,

Billy M.
Smart Goat Web Design
http://www.smartgoat.com

As I understand “best practice”, it’s fine to use tables for data that
falls into a tabular structure, and your label/value pairs would
probably fall into that category.

It’s where you’re trying to present non-tabular data (e.g. layout your
page with multiple columns, put headers/footers on your page, etc.)
that you should be using CSS and not tables.

On that basis, stick with tables for getting your forms to line up.

Regards

Dave M.

Stealing a bit of inspiration from Backpack, I have started using
definition lists –

– a tag I didn’t even know existed until
recently. It’s like an unordered list (
    ), but allows you to have a
    term
    , and its
    definition
    . This makes it very straightforward to do label/field pairs for forms, and you can style away with CSS.

    Asa

    Larry K. wrote:

    I’ve been using tables to get my forms to line up. ( I have usually one
    column for labels, and a column for values ). Should I be using divs
    instead? I’ve been reading some CSS design books lately. They tend to
    recommend divs over tables for general page layout stuff. But, what
    about
    the forms elements? What’s the ‘best practice’ in this regard?

Larry K. wrote:

I’ve been using tables to get my forms to line up. ( I have usually one
column for labels, and a column for values ). Should I be using divs
instead? I’ve been reading some CSS design books lately. They tend to
recommend divs over tables for general page layout stuff. But, what
about
the forms elements? What’s the ‘best practice’ in this regard?

I agree, divs are better. But for listing I often use tabels as well.
Depends on what I want to achieve. You can still use tables but define
table-tags in css to display as tables.

http://www.w3.org/TR/CSS21/tables.html#value-def-table

Thanks for all the comments and suggestions. I’ve been looking at the
responses, and learning alot.!
-Larry

Hi,

For forms where you are asking the user to define something (i.e.
their name, address, etc) I use the

, definition lists. For when I
use a form to get a user to move forward in the application or to
enter data that has already been defined (such as a login) i’ll use a

to seperate the fields or wrap them in a span, although I don’t
usually use a span unless I need to do a bit of odd styling.

Mark.

On 16/06/06, Asa H. [email protected] wrote:

I’ve been using tables to get my forms to line up. ( I have usually one
Rails mailing list
[email protected]
http://lists.rubyonrails.org/mailman/listinfo/rails

–
www.markpanay.com - Jargon Free Development
www.labellife.com - Music Industry 2.0
www.tunecast.co.uk - Music for your website