我想补充的是，基于div的布局更容易维护、发展和重构。只是在CSS中做了一些改变来重新排序元素，这就完成了。根据我的经验，重新设计使用表的布局是一场噩梦(如果有嵌套的表，则会更糟)。

从语义的角度来看，代码也有意义。

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元素上，但这将增加语义值，这是表的支持者强烈反对的。

对于为了简单或临时的东西而拼凑在一起的HTML，表很有用。如果你正在构建一个大型网站，你应该使用div和CSS，因为随着时间的推移，随着网站的变化，它将更容易维护。

我想使用表格元素进行布局确实与表格数据没有什么关系。那又怎样?我的老板在乎吗?我的用户关心吗?

谷歌和其他自动化系统确实关心这些问题，而且它们在许多情况下同样重要。语义代码对于非智能系统来说更容易解析和处理。

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的布局，就更容易调整不同块之间的间距以及它们的相对大小。

显而易见的答案:参见CSS Zen Garden。如果你告诉我你可以很容易地用基于表格的布局做同样的事情(记住- HTML没有改变)，那么无论如何都要使用表格来布局。

另外两个重要的事情是可访问性和搜索引擎优化。

两者都关心信息以何种顺序呈现。如果基于表格的布局将导航放在页面上第二个嵌套表格的第2行的第3个单元格中，则无法轻松地将导航显示在页面顶部。

所以你的答案是可维护性，可访问性和SEO。

不要偷懒。即使事情有点难学，也要用正确的方式去做。