在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而不是表的良好参数非常感兴趣。


当前回答

几年前,我研究了屏幕阅读器和表格的问题,得出了与大多数开发者想法相矛盾的信息:

http://www.webaim.org/techniques/tables/

你可能会听到一些易访问性倡导者说布局表是一个坏主意,应该使用CSS布局技术。他们说的有道理,但是,老实说,在可访问性方面,使用表格进行布局并不是最糟糕的事情。只要桌子在设计时考虑到可访问性,各种残疾的人都可以轻松地使用桌子。”

其他回答

根据过去的经验,我必须选择DIV。即使在OOP中,主要目的也是减少对象之间的耦合,因此这个概念可以应用于DIVS和表。表用于保存数据,而不是围绕页面排列数据。DIV是专门设计用于在页面周围排列项目的,因此设计应该使用DIV,表应该用于存储数据。

此外,编辑由表格组成的网站是非常困难的(在我看来)

根据508法规(对于视障屏幕阅读器),表格应该只用于保存数据,而不是用于布局,因为它会导致屏幕阅读器崩溃。至少别人是这么告诉我的。

如果您为每个div分配名称,您也可以使用CSS将它们一起蒙皮。只是让他们坐成你想要的样子有点麻烦。

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

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

将内容与布局分开是很好的 但这是一个错误的论点;陈词滥调的思考

这是一个错误的论点,因为HTML表格是布局!内容是表中的数据,表示是表本身。这就是为什么从HTML中分离CSS有时会非常困难。您不是将内容与表示分开,而是将表示与表示分开!一堆嵌套的div和一个表没有什么不同——它只是一组不同的标签。

把HTML和CSS分开的另一个问题是,它们需要彼此的密切了解——你真的不能把它们完全分开。无论您做什么,HTML中的标记布局都与CSS文件紧密耦合。

我认为表与div的区别取决于应用程序的需要。

在我们在工作中开发的应用程序中,我们需要一个页面布局,其中各个块将动态地调整自己的大小以适应其内容。我花了几天时间试图让它与CSS和div跨浏览器工作,这是一个完全的噩梦。我们换了桌子,一切都很顺利。

然而,我们的产品有一个非常封闭的受众(我们销售的是带有web界面的硬件),可访问性问题不是我们关心的问题。我不知道为什么屏幕阅读器不能很好地处理表格,但我猜如果这是开发人员必须处理的方式。

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

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

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