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


当前回答

我尽量避免使用TABLEs,但是当我们设计复杂的表单,混合了多种控件类型和不同的标题位置,并对分组进行了非常严格的控制时,使用DIVs是不可靠的,甚至几乎是不可能的。

现在,我不会说这些表单不能重新设计以更好地适应基于DIV的布局,但是对于其中的一些表单,我们的客户坚决不改变以前版本(用经典ASP编写的)的现有布局,因为它与用户熟悉的纸质表单相似。

因为表单的表示是动态的(其中某些部分的显示是基于案例的状态或用户的权限),所以我们使用一组堆叠的div,每个div包含一个由逻辑分组的表单元素组成的TABLE。TABLE的每一列都被分类,这样CSS就可以控制它们。这样,我们就可以关闭表单的不同部分,而不会出现在div中不是表来换行的问题。

其他回答

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

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

我将一个接一个地看你的论点,并试着指出其中的错误。

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

It's not fallacious at all because HTML was designed intentionally. Misuse of an element might not be completely out of question (after all, new idioms have developed in other languages, as well) but possible negative implications have to be counterbalanced. Additionally, even if there were no arguments against misusing the <table> element today, there might be tomorrow because of the way browser vendors apply special treatment to the element. After all, they know that “<table> elements are for tabular data only” and might use this fact to improve the rendering engine, in the process subtly changing how <table>s behave, and thus breaking cases where it was previously misused.

那又怎样?我的老板在乎吗?我的用户关心吗?

视情况而定。你的老板是尖头发吗?那他可能不在乎。如果她有能力,那么她就会在乎,因为用户会在乎。

也许我或我的开发伙伴谁必须维护一个网页关心…表是否更难维护?我认为使用表格比使用div和css更容易。

大多数专业的web开发人员似乎反对你[需要引用]。事实上,表的可维护性较差,这是显而易见的。使用表格进行布局意味着更改公司布局实际上意味着更改每个页面。这可能会非常昂贵。另一方面,明智地将语义上有意义的HTML与CSS结合使用可能会将此类更改限制在CSS和所使用的图片上。

顺便说一下……为什么使用div或span可以很好地将内容与布局分开,而不是表格?只有div的良好布局通常需要大量嵌套的div。

深度嵌套<div>是反模式,就像表布局一样。优秀的网页设计师不需要太多这样的东西。另一方面,即使是这样深嵌套的div也没有很多表布局的问题。事实上,它们甚至可以通过逻辑地将内容划分为多个部分来构成语义结构。

代码的可读性 我觉得正好相反。大多数人懂html,很少人懂css。这是简单的。

“大多数人”不重要。专业人士。对于专业人士来说,表格布局比HTML + CSS带来更多的问题。这就像是说我不应该使用GVim或Emacs,因为记事本对大多数人来说更简单。或者我不应该使用LaTeX,因为MS Word对大多数人来说更简单。

SEO最好不要使用表格

我不知道这是不是真的,也不会把它作为一个论点,但它是合乎逻辑的。搜索引擎搜索相关数据。虽然表格数据当然可能是相关的,但它很少是用户搜索的内容。用户搜索页面标题或类似突出位置中使用的术语。因此,将表格内容排除在过滤之外,从而大幅减少处理时间(和成本!)是合乎逻辑的。

表比较慢。 必须插入一个额外的tbody元素。这对于现代网络浏览器来说是微不足道的。

额外的元素与表变慢无关。另一方面,表的布局算法要困难得多,浏览器通常必须等待整个表加载后才能开始布局内容。此外,缓存布局将不起作用(CSS可以很容易地缓存)。所有这些都在前面提到过。

向我展示一些使用表会显著降低页面速度的基准测试。

不幸的是,我没有任何基准测试数据。我自己也会感兴趣,因为这个论点确实缺乏一定的科学严谨性。

大多数需要升级的网站也需要新的内容(html)。一个新版本的网站只需要一个新的css文件的场景是不太可能的。

Not at all. I've worked on several cases where changing the design was simplified by a separation of content and design. It's often still necessary to change some HTML code but the changes will always be much more confined. Additionally, design changes must on occasion be made dynamically. Consider template engines such as the one used by the WordPress blogging system. Table layouts would literally kill this system. I've worked on a similar case for a commercial software. Being able to change the design without changing the HTML code was one of the business requirements.

Another thing. Table layout makes automated parsing of websites (screen scraping) much harder. This might sound trivial because, after all, who does it? I was surprised myself. Screen scraping can help a lot if the service in question doesn't offer a WebService alternative to access its data. I'm working in bioinformatics where this is a sad reality. Modern web techniques and WebServices have not reached most developers and often, screen scraping is the only way to automate the process of getting data. No wonder that many biologists still perform such tasks manually. For thousands of data sets.

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

下面是我的程序员在一个类似的帖子中给出的答案

语义101

首先看一下这段代码,想想哪里出了问题……

class car {
    int wheels = 4;
    string engine;
}

car mybike = new car();
mybike.wheels = 2;
mybike.engine = null;

当然,问题在于自行车不是汽车。car类对于bike实例是不合适的类。代码没有错误,但是语义不正确。这对程序员的形象很不利。

语义102

现在将此应用于文档标记。如果您的文档需要显示表格数据,那么适当的标记将是<table>。但是,如果将导航放在表中,则滥用了<table>元素的预期用途。在第二种情况下,您没有表示表格数据—您(mis)使用<table>元素来实现表示目标。

结论

游客会注意到吗?不。你的老板在乎吗?也许吧。作为程序员,我们有时会偷工减料吗?当然。但是我们应该吗?不。如果使用语义标记,谁会受益?你,还有你的职业声誉。现在去做正确的事吧。

我相信这是一个与普遍问题有关的问题。HTML诞生时,没有人能预见到它的广泛应用。另一项在自身成功的重压下几乎崩溃的技术。当HTML页面用vi在绿色文本终端上编写时,向页面访问者显示数据所需要的只是一个TABLE,而且大多数数据都是以表格形式显示的。

我们都知道事物是如何进化的。相对来说,table最近已经过时了,但是有很多理由更喜欢基于div和CSS的布局(可访问性不是最后一个)。当然我不能写一个CSS来拯救我的生命:-),我认为图形设计专家应该总是在手边。

也就是说……即使在现代网站中,也有许多数据应该在表格中显示。