What's the advantage of Div over Tables?

I have avoided 'all div designs' because I find the CSS gets so long and searching through can be a pain. Now that ZC is all DIV I am forced to work with DIVs.

So what are the advantages of DIVs over Tables?

These might help answer:
http://www.zen-cart.com/forum/showthread.php?t=13432&highlight=benefits+tableless http://www.zen-cart.com/forum/showthread.php?t=35654&highlight=benefits+tableless

Thanks DB but those didn't really present any great benefits that I should give up simplicity (what I am used to).

Anyway after researching the web I came across BigBaer's site that gave a great benefit for going 'all div' and that's to wrap text around images. It is quite complex but it looks good. Just like print. Check it out http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm

So based on that and the potential to do all kinds of floats, I will make the effort to do more DIVs :)

The text wrapping around images doesn't have to be difficult... Look at the Product detail pages. Description wraps around the product image... already built in.

...and you can do the same using tables too.

And if you don't want the text to wrap round the picture? It's the one thing I've had trouble with using divs on the product info page depending on whether the left column with attribute images is longer then the description column on the right and vice versa. In the end resorted to setting the right column as a fixed number of pixels from the top but not ideal. Tried endless float variations and br clear=all/right/left etc. Any suggestions / examples welcome!

The benefits of CSS and using DIVs (or other block level markup) for layout are many.

• Better portability to other media.

• Potentially better results in search engines. You can have the relevant content near the top of the html instead of buried in heaps of nested tables where it isn't clear what is important within the code (the headline, the content) unless you view the document in a browser (and remember search engines are blind)

• Degrades more gracefully for older browsers. When you apply styles to headlines in the <h1> tag, if an older browser can't read that style you still have some formatting in place.

• Markup and presentation are separated. With a three column, two row table say your logo is in the top left corner and your headline is in the second row, middle column. With CSS you don't need a whole table, just two divs. The content can be in a DIV above the logo in the markup, yet below the logo in the browser presentation. It adds some flexibility. With tables you have to have the logo and text in a certain place in the markup if you want it to display as described.

• Smaller files. Not as many extra <td> tags floating around. Makes programming easier.

That said, tables should be used for what they are good at which is presenting data. It can take a whole lot of extra work to get divs to work in a columnar fashion to return say a list of addresses that will be sorted.

But, once you get past the initial learning curve, I think you will appreciate the benefits CSS and DIVs have over tables.

I use these websites when I run into CSS problems:
http://www.webmasterworld.com
http://www.positioniseverything.net
http://www.alistapart.com

Agree with Product9.

Along with what he already stated, CSS2 uses element positioning which is a major factor in design.

Customization with CSS Div tags allow for more visual formatting not readily available to table designs.

Also, great for SEO because less code for crawlers to index keywords of your site without going through so many table tags, and nested table tags.

Central documentation of styles using cascading style sheets (don't have to edit all pages when changes are made).

Larger sites consisting of hundreds and thousands of page can be easily formatted using style sheets.

In the early days of HTML and web authoring, visual layouts were next to nill, and tables were used to display data, not position elements and style them. When the web got older, designers started using tables to create more visual pleasing layouts by using tables to arrange them on the page. BUT, soon realized that using tables had major limits when it came to issues of positioning and advanced style options.

Consistent look and feel for a website is very important especially in marketing. By using tables for visual formats, there is more room to overlook certain if not many elements that need to be consistent through out your whole site.

Separation between design and content is used quite frequently and should not be overlooked. When working with eCommerce, CMS systems, and higher end application structures, you don't want to mix the business logic model with page formatting.

I have used table design structures in the past, and will not go back to that design paradigm unless to create a template for beta to layout the possible look and feel of final product.

Hope this helps.