文档章节

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
福州
程序员
私信 提问
Javascript:小心使用innerHTML

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

浣熊干面包
2011/01/06
0
0
【2015.8.26】新的开始与纪念web开发

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

C2056LOVE
2015/08/26
0
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
java jsp中form表单提交到数据

我的ptProject.jsp如下: <%@ page language="java" import="java.util.*" import="java.sql.*" pageEncoding="utf-8"%> 项目明细计划填报 项目基本信息(带*号为必填项) 项目名称*: 英文名称......

wenwen1
2012/08/22
16.2K
3
HTML Table 空白单元格补全

在最初自学 Web 开发的时候,那时没有所谓的 DIV/CSS 布局,一概 Table 布局的天下。当时有个问题就来了,如何补全宫格空白的单元格呢?——这是我在弄公司产品页头痛的问题。因为我不是学程...

sp42
2014/05/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 你一口我一口多咬一口是小狗

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @达尔文 :分享Roy Orbison的单曲《She's a Mystery to Me》 《She's a Mystery to Me》- Roy Orbison 手机党少年们想听歌,请使劲儿戳(这里...

小小编辑
今天
39
4
Spring源码学习笔记-1-Resource

打算补下基础,学习下Spring源码,参考书籍是《Spring源码深度解析》,使用版本是Spring 3.2.x,本来想试图用脑图记录的,发现代码部分不好贴,还是作罢,这里只大略记录下想法,不写太细了 ...

zypy333
今天
12
0
RestClientUtil和ConfigRestClientUtil区别说明

RestClientUtil directly executes the DSL defined in the code. ConfigRestClientUtil gets the DSL defined in the configuration file by the DSL name and executes it. RestClientUtil......

bboss
今天
19
0

中国龙-扬科
昨天
4
0
Linux系统设置全局的默认网络代理

更改全局配置文件/etc/profile all_proxy="all_proxy=socks://rahowviahva.ml:80/"ftp_proxy="ftp_proxy=http://rahowviahva.ml:80/"http_proxy="http_proxy=http://rahowviahva.ml:80/"......

临江仙卜算子
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部