Developer/Designer Notes

HTML Form Layout – Div tag or Table tag

Posted by Kiran Mova on March 14, 2007

(If you are looking for tutorial on HTML forms check it on web reference, and HTML Dog).

Now after having decided on how the form layout, what is the best way to implement it? Table tags or Div tags. From my past, tables seem very intuitive and probably the best tool to layout in a grid. But with all the recent comments on ‘use table tag only to represent the table data’, I got to thinking.. Should I use divs.

It seemed harder than it looks, mostly because of my lack of experience with the CSS properties like float and positioning. So I did spend sometime reading about these and the following links have been of great help:

HTML Dog on Approaches to Layout Forms

A List Apart on CSS Practical Tips

So I set out to design the most complex form in my application without using table tags. IT seemed to work very well, till I got into the following issues:

- I have some very obscure labels that span multiple lines

- The float property on labels and spans still exhibits different behavior in FF and IE (interestingly IE works the way I need it, but turns out it is not CSS complaint)

Anyways, before I decided to go back to tables for field layout, I tried to see if I was the only one. Seems like there are a lot of people who still like tables, check the discussion by Garrett

Well, using tables doesn’t harm my application because it is going to be only accessed through Browsers and bandwidth is not a constraint. Of course, I still have to see if I meet the Accessibility criterion.

(However, I found that most of the approaches without tables were to use Div and Span like a row and cell. Why not use tables instead? Is table properties computation considerably higher than divs/spans?)

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

%d bloggers like this: