为什么使用th元素而不是td元素?

时间:2014-02-18 10:27:33

标签: html html-table

我正在阅读th

中使用的HTML th<table>元素之间的差异

根据http://webdesign.about.com/od/tables/f/blfaqthvstd.htmth元素defines the current cell as a table header.

然后继续说某些浏览器将以不同的方式呈现th元素(由浏览器定义),但文章建议不要自己设置样式(通过我假设的CSS)。

我对此完全感到困惑;这表明使用th元素不会给我们任何设计控制,也没有价值/重要性......

我知道有些元素较旧,有些元素已经过时,但我没有提到th元素已被折旧,也无法看到其中的任何值。

如果我错过了,请有人告诉我。谷歌是否以不同的方式读取TH(同样,我的研究没有显示任何内容),th元素是否有助于浏览器呈现表格,或者只是我们想要使用的选项?

3 个答案:

答案 0 :(得分:10)

1)为什么要使用th元素而不是td元素?

语义,使用td代替th对你没有任何影响,好吧,它会让你的工作愉快地完成,但是,为了区分它们,我们使用{{ 1}},ththead等,就像我们可以使用tfoot来包装文字一样,但使用div会更有意义吗?

此外,搜索引擎明白,您的文档包含什么,比如说,您使用p,所以无论您对em文本的样式如何,搜索引擎都会得到一个线索,嘿,这个词在em被强调,因此它在文档中很重要,也许可以是关键字。

就像你在说医生,我的身体疼痛,但如果你描述了em疼痛的哪一部分,那么医生就可以轻松判断并轻松解决问题。

因此,使用相同的逻辑,如果您使用body定义table的标题而不是使用th更有意义,那么将有助于搜索引擎了解您的内容以更好的方式,屏幕阅读器以不同的方式读出数据,浏览器更适当地显示它。


2)然后继续说某些浏览器将以不同的方式呈现td元素

是的,浏览器以粗体

呈现th元素的文本

3)该文章然后建议不要自己设置样式

嗯,我完全不同意这一点,你可以设置th元素的样式


4)我没有提到th元素已被折旧,也无法看到其中的任何值。

不,它们不会过时/弃用 [1]

[1]。但是,对于元素{@ 3}},不推荐使用某些属性以获取更多信息。

答案 1 :(得分:2)

你部分误解了所引用的文件。特别是,它并没有说你不应该设置th;相反,你不应该只使用th作为“样式”,即将它用于不是表头的东西,只是为了使它看起来是粗体和居中的。 (这个警告不是特别相关;我从未见过人们做过这样的事情。)

根据定义,th包含单元格的标题信息。这是相当模糊的,但在许多简单的情况下,它是相当明显和简单的 - 通常使表的第一行包含列的标题,如数量的名称。

实际影响是,如果特殊浏览器和辅助软件知道数据单元和标题单元之间的关联,则可以以更好的方式向用户呈现表。例如,当用户正在调查特定单元格时,它们可以指示相关标题的名称,而不仅仅是“32°C”的内容,例如“Max。温度“来自列标题单元格,”Kairo“来自行标题单元格。

浏览器以粗体显示th元素内容,默认为水平居中;这种做法正在HTML5中标准化。但这只是需要考虑的因素;如果需要,你可以在CSS中覆盖它。特别是粗体对标题单元格非常有用,因此更容易注意它们并将它们识别为标题。

还有不同的细微差别,例如不同的允许属性集(在HTML5中)。

答案 2 :(得分:1)

根据THW3C属性可以通过范围属性指定标题单元格影响的单元格。

此属性对SEO也很重要。它有助于确定HTML页面元素的优先级。

如果您不想在网页上优化SEO:请勿使用它。

如果要根据约定正确编码:使用它。

但我真的不明白你的理由。就像说:

  

为什么STRONG代码?已有SPAN标记,我们可以使用“ font-weight:bold ”在CCS中设置样式!

但这没有意义,因为公约委员会(例如W3C)建立的委员会更准确地描述了所有可能的页面元素。 因此,新HTML5标记的方向具有ADRESSSECTIONARTICLEASIDENAV,......等优势。