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


当前回答

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

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

其他回答

1:是的,你的用户很关心。如果他们使用屏幕阅读器,它就会丢失。如果我使用任何其他试图从页面中提取信息的工具,遇到不用于表示表格数据的表是一种误导。

div或span用于分隔内容是可以接受的,因为这正是那些元素的含义。当我,一个搜索引擎,一个屏幕阅读器或其他任何东西,遇到一个表格元素,我们期望这意味着“以下是表格数据,表示在一个表中”。当我们遇到div时,我们期望“这是一个用于将内容划分为单独部分或区域的元素。

2 .可读性:错误。如果所有的表示代码都是css,我可以阅读html,我将理解页面的内容。或者我可以阅读css和理解的表示。如果html中的所有内容都是混杂在一起的,那么在我甚至可以看到什么是内容,什么不是内容之前,我必须在脑海中剔除所有与表示相关的部分。 此外,我害怕遇到一个不懂css的web开发人员,所以我真的不认为这是一个问题。

3:表比较慢:是的,它们比较慢。原因很简单:在呈现表之前,必须对表进行完整的解析,包括其内容。可以在遇到div时呈现它,甚至在它的内容被解析之前。这意味着div会在页面加载完成之前显示出来。

还有一个好处是,表格更加脆弱,在不同的浏览器中呈现的效果并不总是一样的,不同的字体和字体大小以及所有其他可能导致布局变化的因素。表格是一种很好的方法,可以确保你的网站在某些浏览器中会偏离一两个像素,当用户改变字体大小或以任何其他方式改变设置时,它不会很好地缩放。

Of course #1 is the big one. A lot of tools and applications depend on the semantic meaning of a webpage. The usual example is screen-readers for visually impaired users. If you're a web developer, you'll find that many large companies who may otherwise hire you to work on a site, require that the site is accessible even in this case. Which means you have to think about the semantic meaning of your html. With the semantic web, or more relevantly, microformats, rss readers and other tools, your page content is no longer viewed exclusively through a browser.

对我来说,一个巨大的问题是,表,特别是嵌套表,需要更长的时间来呈现比一个正确布局的css实现。(你可以让css一样慢)。

所有浏览器呈现css的速度都更快,因为每个div都是一个单独的元素,所以用户在阅读时可以加载屏幕。(对于庞大的数据集等)。我在那个实例中使用了css而不是表格,甚至没有处理布局。

嵌套的表(单元格中的表等)直到找到最后一个“/table”才会呈现到浏览器窗口。更糟糕的是,定义不清的表有时甚至无法呈现!或者当它发生的时候,事情就会不正常。(没有正确地与“TD”等共进)

我在大多数情况下使用表格,但当涉及到大数据和希望为最终用户快速呈现屏幕时,我尽最大努力利用CSS所提供的东西。

508符合性-屏幕阅读器能够理解你的标记。 等待呈现——直到</table>元素结束,表格才会在浏览器中呈现。

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

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

我曾经了解到,一个表是立即加载的,换句话说,当连接很慢的时候,表所在的空间保持空白,直到整个表被加载,另一方面,一个div加载从上到下的速度与数据到达的速度一样快,不管它是否已经完成。