TAGS :Viewed: 15 - Published at: a few seconds ago

[ should i use Table or DIV to achive this structure? ]

Want some handy guidelines prior starting the HTML Prototype of this application. Please find below the mockup screen.

Mockup screen

I need to make this structurewith liquid layout so that it will adjust as per the resolution.

Please do suggest me should i go with DIV with floating left or can i use tables to achieve this structure?

Thanks Lokesh Yadav

Answer 1

Seems like a good div approach to me. Floats seem to be the typical way to achieve this, but I've personally always found display: inline-block as an extremely helpful tool to implement these sorts of layouts.

Answer 2

Using table would be much easier. Forms are naturally tabular. Never seen a form that is non-tabular.

the whole table vs div is totally overblown. I do agree that it's not a good idea to use tables for designing layouts but it's what it was back in the old days where CSS support was limited.

however for those to go far to declare forms to be table-less is going too far. All forms are naturally tabular and by doing it in table, you actually reinforce its tabular structure.

We can argue that we should not use tables for calendar since technically, a calendar is tabular for OUR convenience, not because the dates themselves are tabular!

Answer 3

Personally, I'd build that in divs. I'd have a formrow div, then contain each of the columns in left floated divs with a specified width.

Answer 4

I think:

  • the optimal way is to use a DIV with floating but its harder to code because you want a table-style and you must calc the exact width of any div (in pixel or percent).

  • the easyer way is to use TABLES with colspan.