Jump to content
Killersites Community
Vivek

Which Is Best Div Or Table?

Recommended Posts

Using tables for layout is a very outdated way of doing things. Before CSS, it was a good and pretty much only option to get some control over a page, but since we have CSS - and that's been around for way over 10 years now, it is no longer necessary to rely on tables for layout.

 

Tables limit what you can do and clutter up a page with a whole lot of unnecessary code making updates a nightmare and a page ridiculous to navigate with screen readers.

 

The only place a table should be used any more is to present tabular content.

 

I'd go as far as saying anybody who claims that using tables is the way to go is certainly no expert.

 

As to how it works, best to follow some tutorials on how to use CSS:

 

http://www.csstutorial.net/

 

http://www.how-to-build-websites.com/

Share this post


Link to post
Share on other sites

Tables are restricted in their form and are meant for tabular data. Tables were created for scientists to share data long before the internet was for commerce and normal folk.

 

A Div is an empty box used for laying out the web site. DIV is not better, it is correct. Tables for layout are wrong... it is that simple.

 

If understanding is an issue...

  • Think of a trinket box, either the hobby kind you might use to separate beads or buttons etc. or the tool section for separating different size nuts and bolts etc.. May you buy have separation walls you can add, subtract or move as needed to fit the content. That is a Table and limits your layout as cells must be the same size as the other cells in the row or column as an example.
  • Now think about a empty card board box. No pre-defined restrictions or anything, just an empty box, that is a DIV and base frame of your site. Now place different size empty boxes in it. Place a Pen box at the top as a banner, place a couple of different size boxes wherever you wish. Those are more DIVs and can be anywhere and need not be the same size or the same lineup, they can be off-center to one another. Smaller jewelry boxes can be placed in those if you like.

Being undefined, you can change a div any way you like and any where you like. It allows more flexibility to your design, and then add to that making the sizes flexible by defining them in % and you have an element that fits itself to the user agent whether desktop. laptop, tablet or cell phone.

Share this post


Link to post
Share on other sites

There are lot of reasons to deny the use of table for layouts instead of div.

  1. Tables are usually more bytes of markup. (More bytes of traffic for host and hence make it expensive for you, as some hosts charge on amount of bandwidth used)
  2. Tables usually prevent incremental rendering. (Takes longer time to load then CSS)
  3. Tables may require you to chop single, logical images into multiple ones. (This also increases page load time)
  4. Tables break text copying on some browsers.
  5. Tables prevent certain layouts from working within them. (like height:100% for child elements of <td>)
  6. Table-based layouts usually take more time to implement.
  7. Tables are semantically incorrect markup for layout. (They describe the presentation not layout)
  8. Tables lock you into the current design and make redesigns MUCH harder than semantic HTML+CSS.

 

In fact, I use div not only for layouts but also where I actually needs a table.

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

×