是否有必要在任何表中都有 <th> ？

Posted 2023-03-05

【中文标题】是否有必要在任何表中都有 <th> ？

【英文标题】：Is it necessary to have <th> in any table?

【发布时间】：2011-01-17 16:38:20

【问题描述】：

是否有必要在任何表格中包含<th>？即使表格没有标题？

表格有 3 个其他标签 <thead> <tbody> <tfoot> 即使我没有表格页脚，也有必要使用所有标签。 Firefox 默认将所有这些都添加到代码中。

是否有必要，<th> 始终应该在 <thead> 中

如果我在从客户端收到的内容中有一个标题，并且标题来自表格外部但与表格相关，那么我应该如何将该标题放置在表格中

如上表

<h3>Heading of table<h3>
<table>......</table>

作为表格的标题

<table>
<thead><tr rowspan=3><th>Heading of table</th></tr></thead>

或作为表格的标题

<table>
<caption> Heading of table</caption>

哪个对屏幕阅读器好并且语义正确？

【问题讨论】：

相关：***.com/questions/1763639/…

【参考方案1】：

根据html DTD，这是 HTML 表格的内容模型：

<!ELEMENT TABLE - -
     (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>
<!ELEMENT CAPTION  - - (%inline;)*     -- table caption -->
<!ELEMENT THEAD    - O (TR)+           -- table header -->
<!ELEMENT TFOOT    - O (TR)+           -- table footer -->
<!ELEMENT TBODY    O O (TR)+           -- table body -->
<!ELEMENT COLGROUP - O (COL)*          -- table column group -->
<!ELEMENT COL      - O EMPTY           -- table column -->
<!ELEMENT TR       - O (TH|TD)+        -- table row -->
<!ELEMENT (TH|TD)  - O (%flow;)*       -- table header cell, table data cell-->

所以这是非法的语法：

<thead><th>Heading of table</th></thead>

应该是：

<thead><tr><th>Heading of table</th></tr></thead>

<th> 元素在任何地方都不需要。它们只是您可以在表格行中使用的两种单元格类型之一（另一种是<td>）。 <thead> 是一个可选的表部分，可以包含一个或多个行。

编辑：至于为什么使用<thead>有几个原因：

语义：您在区分表格内容和“元数据”。这最常用于区分列标题和数据行； 辅助功能：帮助使用屏幕阅读器的人理解表格的内容； 非屏幕媒体：打印多页表格可以让您将<thead> 内容放在每一页的顶部，这样人们就可以理解这些列的含义，而无需翻回几页；李> 样式： CSS 可以应用于<tbody> 元素、<thead> 元素，两者或其他组合。它为您提供了其他东西来编写选择器； Javascript： 这在使用 jQuery 和类似库时经常出现。额外的信息有助于编写代码。

作为 (5) 的示例，您可以这样做：

$("table > tbody > tr:nth-child(odd)").addClass("odd");

<thead> 元素意味着这些行不会以这种方式设置样式。或者你可以这样做：

$("table > tbody > tr").hover(function() 
  $(this).addClass("hover");
, function() 
  $(this).removeClass("hover");
);

与：

tr.hover  background: yellow; 

这又排除了<thead> 行。

最后，许多相同的论点适用于使用<th> 元素而不是<td> 元素：您表示此单元格不是数据，而是某种标题。通常，这些单元格会在<thead> 部分中的一行或多行中组合在一起，或者根据表格的结构和性质，成为每行中的第一个单元格。

【讨论】：

是的，但是使用 有什么好处，仅仅是因为我们可以为 提供不同的样式吗？ 使用<thead> 和<th> 在许多情况下确实使CSS 样式更容易（因为您需要更少的选择器），但它们也使您的HTML 更“语义化”。如果您有一整行标题，请将这些行放在<thead> 中。但是，对于标题仅在左列中的表格，使用 <thead> 是没有意义的。 你的意思是如果我们有多个 就应该使用 ，否则只有 就足够了 是 应该始终是任何表的一部分吗？因为我们总是有表格的数据，所以如果我们使用 或 那么是否也必须使用 ？ <th> 标签对可访问性很有用。当屏幕阅读器用户位于表格的第 14 行时，他们可以让屏幕阅读器读出当前单元格的标题，以帮助他们记住数字的含义。 （这假设您正确使用了scope 属性，以指示<th> 标记适用于哪些单元格。）

【参考方案2】：

如果要显示表格数据，请使用<th>s - 每列使用一个。这对您的普通用户来说很好，对屏幕阅读器来说是必不可少的。如果您将表格用于布局目的（或其他恶意方案...），请勿使用<th>s

【讨论】：

开个玩笑——意思是“邪恶的计划”——bwaa-haa-haa-haa（邪恶的笑声）

【参考方案3】：

不，没有必要。但它看起来不像你使用的权利。通常，每列都有一个。正确使用 th 的一个简单例子是：

<table>
<tr><th>Breed</th><th>Name</th></tr>
<tr><td>Pekingese</td><td>Pluto</td></tr>
<tr><td>Lab</td><td>Buddy</td></tr>
</table>

你也可以这样做：

<table>
<thead><tr><th>Breed</th><th>Name</th></tr></thead>
<tr><td>Pekingese</td><td>Pluto</td></tr>
<tr><td>Lab</td><td>Buddy</td></tr>
</table>

【讨论】：

我刚刚添加了代码，例如，如果我使用 rowspan 并且标题对于所有列只有一个。

rowspan 是单元格的属性，而不是行。另外，我认为您想使用 colspan （跨越多个列）。并且通常使用单个跨页标题单元格是没有意义的。

例如，

谢谢。当我们可以用 有什么好处？ 它允许不同的样式，它允许您在语义上分离表格的各个部分。它是否使表格阅读对屏幕阅读器用户有帮助？

和	制作表格时，添加

【参考方案4】：

您想使用最能描述您的数据的内容。

<caption> 将描述整个表格。 th 将创建一个单元格，通常用于描述一列（但也可用于行标题）。

thead、tfoot 和 tbody。 all 可以使用并且都是可选的，前提是它们按该顺序排列，如果使用，并且您只有一个 thead 和一个 tfoot（但您可以有多个 tbody。许多浏览器（全部？）将添加如果你不这样做，它们会隐含，但规范说它们是可选的。

th 可以出现在任何tr 中，无论tr 在哪里。

【参考方案5】：

<table>
     <tr>
        <td>text</td>
     </tr>      
</table>

这是我能想到的最小表格。

【讨论】：

<table><tr><th></th></tr></table> 至少同样有效。

【参考方案6】：

好处是语义。 <th> 表示 T 能够 H 的首领。使用它来标记列的标题。一般在<thead>内。

【讨论】：

你的意思是如果我们使用

那么它应该总是在 ？以及添加 有什么好处，而我们可以用

和	制作表格，它对屏幕阅读器有好处吗？

【参考方案7】：

答案是

是的！

如果您使用表格来显示表格数据。

表格数据被组织成行和列是有原因的。 表格单元格中数据的含义是由它所在的列和行的含义来定义的。

将赋予行和列意义的单元格与仅包含数据的单元格区分开来非常重要。

例如，下表绝对没有传达任何有意义的信息：

34 56 90 15 45 65 85 30 50 55 70 35

只有在给定行和列名称的情况下，数字才有意义。这些名称使用<th> 标记：

二月 五月 八月 十一月 第一次 肯尼迪 IST

当然，我们仍然不知道这些数字是什么意思，这就是为什么需要<caption>：

部分机场的月平均气温
    二月 五月 八月 十一月
第一次
肯尼迪
IST

最后，重要的是要注意测量单位、数据来源等细节。这类信息通常位于表格的页脚：

部分机场的月平均气温
    二月 五月 八月 十一月
第一次
肯尼迪
IST
以°F 为单位的温度。资料来源：出版物 #456 MNMO

表格的标题进入<caption>。当表变大时，<thead> 和 <tfoot> 部分特别有用。示例见How to deal with page breaks when printing a large HTML table。

您可以使用<colgroups> 将逻辑相关的数据组合在一起。

【讨论】：

你的意思是我的第一个例子不应该被使用

@Jitendra 绝对。 <h3> 将是表格所在部分的标题，而不是解释表格的标题。

"任何表中都必须有

吗？"答案是“他有空”而不是“是”。这不是必需的，但推荐。 cletus 已经列举了他应该使用它们的免费理由。

@Omar Abid 如果表格用于显示实际的表格数据，<th> 表示 每 行和 每 b> 列是必须的。否则，表格没有意义。这是大学二年级学生第一次尝试写报告时犯的那种错误。这与 HTML 无关。这是关于什么是表。

@Sinan Ünür，一个表不需要有 meaning（字面意义上的）才能成为一个 valid 的表格数据集（它只是有效且无用的）。此外，它的含义可以从上下文中推断出来。也就是说，推荐标题行和列以获得最佳传达意义。