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


当前回答

Google gives very low priority to text content contained inside a table. I was giving some SEO advice to a local charity. In examining their website it was using tables to layout the site. Looking at each page, no matter what words - or combination of words - from their pages I used in the Google search box the pages would not come up in any of the top search pages. (However, by specifying the site in the search the page was returned.) One page was well copy written by normal standards to produce a good result in a search but still it didn't appear in any of the first pages of search results returned. (Note this text was within a table.) I then spotted a section of text on the pages which was in a div rather than a table. We put a few of the words from that div in the search engine. Result? It came in at No.2 in the search result.

其他回答

Try to merge/split a 10/20 something deep colspan/rowspan. More than once I had to supress my instinct to start a fight with someone. [?!] Try to change source code order without changing visible order. [SEO, usability, ...] The very (really simple) page we're looking at is ~150K. I bet It can nearly be halved using proper CSS. [SEO (Yes, SEO, read latest Google specs etc), perfo, ...] Try to make an iterator template that can work in any width. The discussion of the matter in this table-based medium of SO can cause a singularity and destroy us all

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

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

如果您为每个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>元素来实现表示目标。

结论

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

围绕语义标记的整个思想是标记和表示的分离,其中包括布局。

Div并没有取代表,它们在将内容分离为相关内容块(,)方面有自己的用途。当您不具备这些技能并且依赖于表格时,您通常必须将内容分离到单元格中以获得所需的布局,但是在使用语义标记时,您不需要触摸标记来实现表示。在生成标记而不是静态页面时,这一点非常重要。

开发人员需要停止提供暗示布局的标记,以便我们这些拥有显示内容技能的人能够继续工作,并且开发人员不必在表示需要更改时返回他们的代码进行更改。