文档章节

HTML Table 的研究

林玮晶
 林玮晶
发布于 2015/04/13 18:07
字数 1040
阅读 13
收藏 0

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 年推出)。

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

© 著作权归作者所有

共有 人打赏支持
林玮晶
粉丝 1
博文 24
码字总数 7227
作品 0
福州
程序员
智能卡开发的相关总结

1.EMV技术学习和研究(一)开篇(http://blog.csdn.net/xuture/article/details/9208259) 2.EMV技术学习和研究(二)应用选择(http://blog.csdn.net/xuture/article/details/9250067) 3.EMV技......

IT追寻者
2016/09/08
4
0
【2015.8.26】新的开始与纪念web开发

okay重新通过邮箱找回了这个账号的密码,过去一年了,像是尘封起来的一些岁月静静的躺在一个并不眷顾的角落。当时很喜欢一个女孩,我希望用我的行动来帮助她,那一阵子疯狂的看书敲代码,就是...

C2056LOVE
2015/08/26
0
0
Javascript:小心使用innerHTML

最近在做AJAX,想用javascript实现DataList功能,遇到一个棘手的问题,由于要生成的HTML很长,所以我写成如下的形式: list.innerHTML=" "; list.innerHTML+=" " ...... 但是这样生成的innerHTML...

浣熊干面包
2011/01/06
0
0
【政策】北京市科委发布最新征集新一代人工智能、脑认知与类脑技术等六大领域储备课题

去年,在国家层面频频出台一系列人工智能发展规划政策后,2018年地方进入政策落地实施阶段。 11日,北京市科委发布六份通知,征集2018年六大技术领域储备课题,这六大领域分别为: ①认知与类...

技术小能手
01/12
0
0
今日数据行业日报(2017年8月28日)

【投资经济】 BCG:2017年全球财富报告 BCG:2017年全球财富报告 | 互联网数据中心-199IT | 中文互联网数据研究资讯中心-199IT 普华永道:2017年上半年中国企业并购市场报告 普华永道:2017年...

DingLi
2017/08/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 小心着凉 @红薯

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子:5.33起,其声呜呜然,如怨如慕,如泣如诉。余音袅袅,不绝如缕。分享Arch Enemy的单曲《Bridge Of Destiny (2009)》 《Bridge Of...

小小编辑
今天
283
4
what f,,

anlve
今天
9
0
初级开发-编程题

` public static void main(String[] args) { System.out.println(changeStrToUpperCase("user_name_abc")); System.out.println(changeStrToLowerCase(changeStrToUpperCase("user_name_abc......

小池仔
今天
15
0
现场看路演了!

HiBlock
昨天
23
0
Rabbit MQ基本概念介绍

RabbitMQ介绍 • RabbitMQ是一个消息中间件,是一个很好用的消息队列框架。 • ConnectionFactory、Connection、Channel都是RabbitMQ对外提供的API中最基本的对象。Connection是RabbitMQ的s...

寰宇01
昨天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部