在HTML中,表格不应该用于布局,这似乎是普遍的观点。

Why?

我从来没有(老实说,很少)看到过支持这一点的有力论据。通常的答案是:

It's good to separate content from layoutBut this is a fallacious argument; Cliche Thinking. I guess it's true that using the table element for layout has little to do with tabular data. So what? Does my boss care? Do my users care?Perhaps me or my fellow developers who have to maintain a web page care... Is a table less maintainable? I think using a table is easier than using divs and CSS.By the way... why is using a div or a span good separation of content from layout and a table not? Getting a good layout with only divs often requires a lot of nested divs. Readability of the codeI think it's the other way around. Most people understand HTML, few understand CSS. It's better for SEO not to use tablesWhy? Can anybody show some evidence that it is? Or a statement from Google that tables are discouraged from an SEO perspective? Tables are slower.An extra tbody element has to be inserted. This is peanuts for modern web browsers. Show me some benchmarks where the use of a table significantly slows down a page. A layout overhaul is easier without tables, see css Zen Garden.Most web sites that need an upgrade need new content (HTML) as well. Scenarios where a new version of a web site only needs a new CSS file are not very likely. Zen Garden is a nice web site, but a bit theoretical. Not to mention its misuse of CSS.

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

其他回答

通过仍然使用表格布局,我们错过了在div方面的创新。

许多人提出了解决方案,使创建布局的divs更容易。最流行的是网格架构。有基于此体系结构的动态布局生成器。查看: 1) 960。Gs和(http://grids.heroku.com/) 2)蓝图 最近也是如此。

在架构和表格布局工具方面,我还没有看到太多创新。

我想说,撇开所有的理论,实际上布局与CSS和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.

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

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

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

“我的老板在乎吗?”

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

不幸的是,CSS Zen Garden不能再作为一个好的HTML/CSS设计的例子。实际上,他们最近的所有设计都使用图形作为部分标题。这些图形文件是在CSS中指定的。

因此,一个网站的目的是展示将设计排除在内容之外的优势,现在却经常犯将内容纳入设计的不可言说的罪。(如果HTML文件中的节标题要更改,则显示的节标题不会更改)。

这只能说明,即使是那些提倡严格的DIV和CSS宗教的人,也不能遵循他们自己的规则。你可以用它来指导你如何严格遵守它们。

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

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