HTML Table 的研究

1. 表格的使用不会影响 SEO

其实搜索引擎不会因为你的网站用了大量的 table 而让你的网站在排名上有升降，只是 table 确实让搜索引擎在分析上用上较多的时间，另外 table 对 手机制作不友好，维护不易... 基本上是技术上的问题，而 SEO 方面，其实没有太大影响。PitStopMedia 的 Traian 对此有比较详细的描述。

Search engines and spiders don't care one way or another. Search engines look for content on the pages and not the HTML code; for that matter, even the pages which are not HTML coded properly or W3C valid still get indexed and rank in search engines.

via http://www.searchenginepeople.com/blog/css-tables.html#ixzz3WLgzasI0

As far as SEO is concerned, search engines do not care. However, the idea is to separate design from content. Tables should strictly be used for tabular data, divs for layout. Using tables for design purposes mixes your markup with layout elements, which is regarded as bad practice.

via http://webmasters.stackexchange.com/questions/6890/are-html-tables-bad-for-seo

Tables render slightly slower than divs, but it's not the end of the world. In general, you should avoid tables unless you're working with actual tabular data, but if tables make your life easier they're not going to have much impact on SEO, if any.

via http://moz.com/community/q/div-tags-vs-tables

那么到底哪些因素会影响到 SEO 呢？以下是 Search Engine Lead 的整理，虽然是针对 Google 的不过对百度也有一定的适用。

想想一下，如果你是搜索引擎公司，为了提供较好的搜索结果，你会怎么做？估计会存两份的文件，一份有 HTML 结构的，一份就是纯粹的文章信息内容，所以搜索引擎就是内容为王，剩下的是关键字的处理(Ht、Ac、Cr 都涉及这方面的内容)。

当然为了符合现代设计，在 layout 方面，还是不要用 table，主要考虑到页面的 loading 时间，和手机版的开发，自适应设计基本上成了现在网页设计的标准，而 table 在自适应设计方面确实比较鸡肋。

2. 较为复杂的表格使用

这是 W3 文档中给的案例，是一个相当复杂的表格应用，代码如下:

<table>
	<caption>Measurement of legs and tails in Cats and English speakers</caption>
	<thead>
	<tr> <th> ID <th> Measurement <th> Average <th> Maximum
	</thead>
	<tbody>
		<tr> <td> <th scope=rowgroup> Cats <td> <td>
		<tr> <td> 93 <th scope=row> Legs <td> 3.5 <td> 4
		<tr> <td> 10 <th scope=row> Tails <td> 1 <td> 1
	</tbody>
	<tbody>
		<tr> <td> <th scope=rowgroup> English speakers <td> <td>
		<tr> <td> 32 <th scope=row> Legs <td> 2.67 <td> 4
		<tr> <td> 35 <th scope=row> Tails <td> 0.33 <td> 1
	</tbody>
</table>

3. col 的使用

比较有效的使用 col 必须和 colgroup 配合使用，否者会导致一系列的兼容问题，以下是海外 W3Schools 上的罗列:

我们可以看到大部分的属性设置在 HTML5 中都不被支持，包括: align、char、charoff、valign、width。只能通过 CSS 来处理，生效的有: border、background、width 和 visibility；其中，visibility 在 Webkit 浏览器中都不支持的，包括 Chrome 浏览器，IE 是支持的。

4. 数据岛 datafld 的使用

datafld 是 IE 4.0 的产物，IE 5.0 做了完善，正式推出，目的是让 XML 和 HTML 能够有效的互动，当时还提出的 DHTML 的概念，这是 IE 独家支持的技术，不过随着微软近年来不断向 W3C 规范靠拢，很多功能都不再支持，IE 7.0 之后就不再支持数据岛了，代替的是 AJAX 处理方式。XML 数据格式也基本上由更加轻量的 JSON 数据代替。

5. sortable 与 sorted 属性

虽然 w3 的文档中提到 sortable 与 sorted 属性,分别作用于 table 与 th 元素，然而该属性还未被任何浏览器支持（预计 2016 年推出）。

6. char 与 charoff char 和 charoff 是 HTML4 的遗物还未获得大部分浏览器的支持，就迎来了 HTML5，所以基本上大部分的浏览器都不支持。

转载于:https://my.oschina.net/wjlin/blog/400677