Div's VS. Tables or CSS VS. Being Stupid

Why is using DIVs or spans tags better than using a table layout?

It's mostly about the semantics, I think. A <table> is built to represent tabular data, and using it to lay out elements violates that. Also, anything that can be done with <table> can be done just as easily or easier with CSS 99.9% of the time. It's not that much easier in the other cases, and like you say, it makes markup ugly and hard to follow. It also violates the separation of content, behaviour, and presentation fundamental to web development.

What are the advantages of DIVS over tables?

This question gets asked a lot. Take a look at these:

Why not use tables for layout in HTML?

DIV's vs. Tables or CSS vs. Being Stupid

Yet Another Divs vs Tables issue: Forms

div element instead of table ?

a few reasons:

1) div is more semantically correct in most cases. people who code their sites in table structure aren't using tables for what they're made for, which is tabular data. divs represent a "division" or a section of the page, so putting items in divs is more correct.

2) divs are more flexible and easier to style and maintain. you don't have to write <table><tr><td>Text here</td></tr></table> every time you want to say something when you can just write <div>Text here</div> instead. you can add css hooks (ie, classes or elements) to both tables and divs, but with divs it is infinitely more flexible.

3) table structured sites are just plain ugly :)

Are tables replaced by DIVs?

To be semantically correct, tables should only used for tabular data and not for laying out a page.

David Dorward brought something to my attention in a comment. According to the HTML 4.01 Specification's section on Tables in HTML Documents:

Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

What is the benefit of tableless design if you need clearing blocks everywhere?

What if I told you you didn't need a clearing block?

.clear-block:after {    content: ".";    display: block;    height: 0;    clear: both;    visibility: hidden;}
.clear-block {    display: inline-block;}

<div id="wrapper" class="clear-block">    <div style="float:right">        Your content here    </div>    <div style="float:left">        More content here    </div></div>

Table vs CSS-based layouts for web pages

The short answer is that you should use tables for tabular data ( and not layout, see here why ), otherwise you use the right element for the right purpose, p for paragraphs, div for meaningful division ( don't abuse divs ), et cetera. Each element serves a purpose and you should use w3.org to look things up.

That being said, there are some people who still have the wrong frame of mind in CSS, you should avoid layouts that are completely reliant upon absolute positioning and pixel perfect abuse, instead rely on fluid, em-based layouts when you can as these are more adaptable to different screen resolutions and environments.

Other benefits of using proper semantically marked up HTML and CSS would be that you control all styles from the style-sheet, so that results in less tag soup code ( smaller file size ) and you only have to worry about updating content, not layout inside the markup [ separation of presentation ( css ) from behavior ( js ) and content ( html ) ].

Tables instead of DIVs

The whole "Tables vs Divs" thing just barely misses the mark. It's not "table" or "div". It's about using semantic html.

Even the div tag plays only a small part in a well laid out page. Don't overuse it. You shouldn't need that many if you put your html together correctly. Things like lists, field sets, legends, labels, paragraphs, etc can replace much of what a div or span is often used to accomplish. Div should be used primarily when it makes sense to indicate a logical division, and only appropriated for extra layout when absolutely necessary. The same is true for table; use it when you have tabular data, but not otherwise.

Then you have a more semantic page and you don't need quite as many classes defined in your CSS; you can target the tags directly instead. Possibly most importantly, you have a page that will score much better with Google (anecdotally) than the equivalent table or div-heavy page. Most of all it will help you better connect with a portion of your audience.

So if we go back and look at it in terms of table vs div, it's my opinion that we've actually come to the point where div is over-used and table is under-used. Why? Because when you really think about it, there are a lot of things out there that fall into the category of "tabular data" that tend to be overlooked. Answers and comments on this very web page, for example. They consist of multiple records, each with the same set of fields. They're even stored in a sql server table, for crying out loud. This is the exact definition of tabular data. This means an html table tag would absolutely be a good semantic choice to layout something like the posts here on Stack Overflow. The same principle applies to many other things as well. It may not be a good idea to use a table tag to set up a three column layout, but it's certainly just fine to use it for grids and lists... except, of course, when you can actually use the ol or ul (list) tags.