html表格:thead vs th


155

(根据此页面上的示例,无论如何,看起来)如果您正在使用THEAD,则无需使用TH。

真的吗?如果是这样,THEAD与TH的优缺点是什么?

Answers:


124

所述<thead>标签用于组中的一个HTML表中的标题内容。该thead元素应与tbodytfoot元素结合使用。

更多:thead

<thead>可以封装一整行(或多行)以将其指定为表标题。根据规范,

“这种划分使用户代理能够支持与表头和表脚无关的表体滚动。当打印长表时,表头和表脚信息可以在包含表数据的每一页上重复。”

<th>另一方面,用于将特定单元格设置为标头单元格而不是普通数据单元格。


22
我总是同时使用它们。

11
那是您在“更多:thead”中链接的一个古老网站。
masterxilo 2014年


3
@masterxilo您期望什么?HTML本身非常古老。
丹·贝查德

1
@Kano您是否会反对链接到仍在使用的30年历史的RFC?只要信息仍然相关,页面有多旧有什么关系?
jmbpiano

65

<th>实际上是<td>当您要将单元格标记为标题单元格时的替代方法。

如果您想使用<thead>并且<th>别忘了套<th>在里面<tr>。否则,该代码可能无效。
例:

<table>
  <thead>
    <tr>
      <th>Season</th>
      <th>Goals</th>
      <th>Assists</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>2009-2010</th>
      <td>25</td>
      <td>43</td>
    </tr>
    <tr>
      <th>2011-2012</th>
      <td>40</td>
      <td>20</td>
    </tr>
  </tbody>
</table>


2
这不能回答原始问题,它是一个附录,应该是注释而不是答案。
Gerald Schneider

7
我知道,但是我的信誉度太低,无法发表评论,所以我尝试发表答案。很抱歉,我的错,但是整个堆栈服务的规则有时对我来说很奇怪。
rflw

28
实际上,此答案是唯一显示TH和THEAD用法的答案。为此+1!
barrypicker

4
如果您写“好处是th可以在a内使用thead,也可以在a内使用tbody,则这两个元素在各自的上下文中都是有用的。” 回答了这个问题……Gerald只是对您编写答案的方式很挑剔,但实际上,这是唯一提供有意义的示例的答案。
CPHPython

1
我什至不知道默认情况下会在没有额外的CSS的情况下th将其加粗,谢谢!
CPHPython '16

11

th比可能包含的更具体thead。甲th细胞是指定对应的报头中td的细胞。实际上,您可以headerstd单元格添加一个属性,该属性指向单元格的ID th(适用于屏幕阅读器)。因此thtd该列的s 直接相关。

但是,thead可以包含任何信息...通常是的,它确实包含th单元格,但是它也可以包含您认为适合作为表格顶部信息的任何内容(标题除外),因为标题有其自己的标记,例如好)。



6

<thead>

表中的行可以被分组到一个表头,表脚,和一个或多个表体部分,使用THEADTFOOTTBODY分别的元件。这种划分使用户代理能够独立于桌子的头和脚来支持桌子主体的滚动。当打印长表时,可以在包含表数据的每一页上重复表的头和脚信息。

表头和表脚应包含有关表列的信息。表主体应包含表数据行。

如果存在,则每个THEAD,TFOOT和TBODY都包含一个行组。每个行组必须至少包含由TR元素定义的一行。

<th>

表单元格可能包含两种类型的信息:标头信息和数据。这种区别使用户代理即使在没有样式表的情况下也可以清晰地呈现标题和数据单元。例如,可视用户代理可以用粗体字体显示标题单元格文本。语音合成器可以使用不同的语音转折来呈现标题信息。

TH元素定义包含标题信息的单元格。用户代理具有两个可用的头信息:TH元素的内容和abbr属性的值。用户代理必须呈现单元格的内容或abbr属性的值。对于视觉媒体,当没有足够的空间来渲染单元格的全部内容时,后者可能是合适的。对于非可视媒体,当表头与它们所应用的单元格的内容一起呈现时,可以将abbr用作表头的缩写。

资料来源:http : //www.w3.org/TR/html4/struct/tables.html


3

据我所知,除非使用CSS指定渲染差异,否则渲染没有差异。一<td>的内<thead>将呈现相同的<th>的内部<table><tbody>


thead元素也包含行。
DanMan 2011年

1
我认为您是说渲染的<td>内部<thead>与相同<th>,而不是a <tr>
frabjous19年

0

这里没有硬性规定。该<thead>元素只是将列和行分组的另一种方式,就像<tbody>and <tfoot>is。因此,您有更多的脚本和格式设置可能性。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.