DOM操作在基于表的布局中是很困难的。

使用语义div:

$('#myawesomediv').click(function(){
    // Do awesome stuff
});

表:

$('table tr td table tr td table tr td.......').click(function(){
    // Cry self to sleep at night
});

当然，第二个例子有点愚蠢，您总是可以将id或类应用到表或td元素上，但这将增加语义值，这是表的支持者强烈反对的。

使用DIV，您可以轻松地进行切换。例如，你可以这样做:

Menu | Content

Content | Menu

Menu
----
Content

在CSS中更改它很容易，而在HTML中则不然。你也可以提供几种风格(右手，左手，专为小屏幕)。

在CSS中，您还可以将菜单隐藏在用于打印的特殊样式表中。

另一个好处是，你的内容在代码中总是按照相同的顺序(菜单在前，内容在后)，即使在视觉上它是以其他方式呈现的。

布局的灵活性 想象一下，您正在创建一个带有大量缩略图的页面。 div: 如果你把每个缩略图放在DIV中，向左浮动，可能一行有10个缩略图。让窗口变窄，BAM -它是一行6个，或者2个，或者其他合适的。 表: 你必须明确地说一行中有多少单元格。如果窗口太窄，用户必须水平滚动。

可维护性 和上面的情况一样。现在要向第三行添加三个缩略图。 div: 把它们加进去。布局会自动调整。 表: 将新单元格粘贴到第三行。哦!现在那里的商品太多了。从那一行切一些，放在第四行。现在那里的商品太多了。从那一行切一些……(等) (当然，如果您使用服务器端脚本生成行和单元格，这可能不是问题。)

I have found that even with the best planning divs come up short in several respects. For instance. there is no way with divs to have a bottom bar that always sits at the bottom of the browser, even when the rest of the content does not go to the bottom of the browser. Also, you cannot elegantly do anything better than three columns, and you cannot have columns that grow and shrink according the the width of their content. In the end, we try to use divs first. However, we will not limit our html designs based on some religious content vs layout ideal.

CSS布局通常在可访问性方面要好得多，前提是内容以自然的顺序出现，并且没有样式表也有意义。不仅仅是屏幕阅读器难以适应基于表格的布局:它们也使移动浏览器更难正确呈现页面。

此外，使用基于div的布局，你可以很容易地用打印样式表做一些很酷的事情，比如从打印页面中排除页眉、页脚和导航——我认为这是不可能的，或者至少很难用基于表格的布局做到这一点。

If you're doubting that separation of content from layout is easier with divs than with tables, take a look at the div-based HTML at CSS Zen Garden, see how changing the stylesheets can drastically change the layout, and think about whether you could achieve the same variety of layouts if the HTML was table based... If you're doing a table-based layout, you're unlikely to be using CSS to control all the spacing and padding in the cells (if you were, you'd almost certainly find it easier to use floating divs etc. in the first place). Without using CSS to control all that, and because of the fact that tables specify the left-to-right and top-to bottom order of things in the HTML, tables tend to mean that your layout becomes very much fixed in the HTML.

实际上，我认为完全改变一个基于div和css的设计而不改变div是非常困难的。然而，使用基于div和css的布局，就更容易调整不同块之间的间距以及它们的相对大小。

我曾经处理过一个包含6层嵌套表的网站，这个网站是由一些应用程序生成的，并且生成了无效的HTML，事实上，我花了3个小时的时间来纠正它，因为一个小的改变。

这当然是边缘情况，但是基于表的设计是不可维护的。如果你使用css，你分离了样式，所以在修复HTML时，你不必担心破坏。

同样，用JavaScript试试这个方法。将单个表单元格从一个位置移动到另一个表中的另一个位置。执行起来相当复杂，div/span只需要复制粘贴即可。

“我的老板在乎吗?”

如果我是你的老板。你会在乎的。,)如果你珍视你的生命。