In my opinion you can do much more with div's than tables, they behave better, and design is faster once you've goten used to doing them. Not to mention, tables are ment for "tabular data"
DIV is better for both end user, and for me as a coder. For end user the pages load faster, for me it's faster to code up. The only problem I come across with DIV's is to get the "footer" bar at the bottom, ( specially if the menu is long, and the main content area is not long enough) . Otherwise it's perfect for me. regards
Table free design offers many advantages as others have pointed out -- but if you must use tables for Layout, there is a great article about creating accessible Tables at http://www.webaim.org/techniques/tables/ -- sorry I can't offer a live link yet. James
I don't believe tables should have ever been considered for the structural layout of a design, there intention is to hold data... And only that. Your question is a no-brainer - DIV all the way.
Neither, and here's why. A DIV is a(n otherwise) meaningless block-level element used to divide sections of a Web page. HTML elements have their purposes such as H1-H6 for headings, P for paragraphs, UL for unordered lists, OL for ordered lists, LI for list items in both unordered and ordered lists, and so forth. They all have a meaning, and should thus be used for the job they were intended. Rather than wrapping everything around a DIV container (or using sloppy HTML code) you should learn what these elements mean and how to use them according to their meaning to structure your Web pages. This is called semantics. DIVs do have their uses, especially for headers and footers, like so: <div id="header"> <img src="/images/logo.png" width="200" height="80" alt="Web Site Title" title="" /> <!-- obviously I'm using XHTML here; if I were to use regular HTML I wouldn't include the space and the forward slash before the > character --> </div> <div id="footer"> <small>Copyright © 2006-2007, The Monster Under the Bed. All Rights to Scare Unsuspecting Children Reserved.</small> </div> Code (markup): It's also useful for defining your main content area and sidebars. <div id="content"> Main Page Content Goes Here </div> <div id="sidebar"> Sidebar Content Goes Here </div> Code (markup): And for menus - drop that DIV container. Let me show you how it's really done. <ul id="menu"> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> </ul> Code (markup): That's it. It's all you'll ever need. No extra DIV wrapper needed. So, how does this look on a completed Web page (in between the <body> and </body> tags obviously)? <div id="header"> <img src="/images/logo.png" width="200" height="80" alt="Web Site Title" title="" /> </div> <ul id="menu"> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> </ul> <div id="content"> Main Page Content Goes Here </div> <div id="sidebar"> Sidebar Content Goes Here </div> <div id="footer"> <small>Copyright © 2006-2007, The Monster Under the Bed. All Rights to Scare Unsuspecting Children Reserved.</small> </div> Code (markup): Like that. If you have a footer menu, use a list (since it's just a list of links, like the main menu). But you won't need to slap an ID on it, since you'll be able to reference it from the #footer selector in your stylesheet. Given the simple HTML code I've provided here, tell me, how many layouts can you produce from this? Yes, I'm actually testing your knowledge. You may not add any extra HTML elements to the page, except for inside the DIV with the ID of "content".
I always used tables ... Say till Yesterday. I just popped up on a few web pages to see the advantagse of it and then i goofed up.Today i have a NO TABLE design for 3 of my websites already (Had a tough time redesigning it with CSS) but i feel much better with divs now. Divs KUDOS
That shouldn't be a problem unless you're using absolute positioning for your layout, which will cause far more problems than that.
I just like to use one table in my websites to hold my layout. Harder to break table-based layouts (especially with dynamic sites), and less problems with footers, not really a big deal if you use one table, tables only get bad when you're using nested ones with spacers and such.
Dan Schulz's answer is the correct one. They are for different purposes. Dont fall into the trap of thinking one is better than other they are simply different and overly divided (div) pages are as bad for usability and search engine optimisation as the "traditional" nested tables were. As usual things have gone from one extreme to another and yet to find the proper middle ground