What are the benefits using div for aligning forms rather than table?

Question

I normally use table to align forms. It's good for me to keep static width for all cells in a single column. It might be a lack of my knowledge. I checked source code of some popular website to confirm that whether I'm the only one stuck with table to align forms, but found I'm not the only one. I know this doesn't means we can use tables for align forms, anyway....

Table is for representing "tabular data" I agree, is div is for "align data" ? Please tell what are the benefits of using div over table?

http://stackoverflow.com/questions/2617895/actual-table-vs-div-table — Ozair Kafray, Jun 04 '12 at 04:55
http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html — Ozair Kafray, Jun 04 '12 at 04:57
http://stackoverflow.com/questions/61250/divs-vs-tables-or-css-vs-being-stupid — Ozair Kafray, Jun 04 '12 at 04:59
http://stackoverflow.com/questions/339210/yet-another-divs-vs-tables-question-forms — Ozair Kafray, Jun 04 '12 at 05:03

chris · Answer 1 · 2012-06-04T05:12:25.593

My favorite reason for using divs especially in forms in that it makes responsive design much easier. You get better control of your content if you need to adjust for different screen widths minus the beautiful vertical align center ability of tables. Mobile is becoming more and more important.

Another cool thing is that you can convert divs into tables using css to take advantage of table advantages when you need to eg desktop rendering. Note support for css tables isnt universal.

At the end of the day if you don't care about mobile rendering and your tables aren't nested to death its really not a big deal if you use tables. They are quick and easy to implement and no user is going to notice a difference functionally.

On the other hand it would seem that div forms can be a lot prettier.

score 0 · Answer 2 · answered Jun 04 '12 at 05:05

Using a table for data which is not fit in a table is not semantic and simply bloats your code. It has a nasty habit of making really ugly code along the way.

What I usually prefer is to use the form's labels and fieldsets themselves to format and structure the forms, without even adding additional divs.

A div means a completely neutral block level element. It has no semantic meaning, which makes it good for structuring and hierarchy. But that doesn't make it a magic solution.

When designing a website, put emphasis on the data, rather than the look and feel. Things will go much smoother that way.

What are the benefits using div for aligning forms rather than table?

2 Answers2