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

Question

是否有必要在任何表格中包含<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>

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

Answer 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>有几个原因：

1. 语义：您在区分表格内容和“元数据”。这最常用于区分列标题和数据行；
2. 辅助功能：帮助使用屏幕阅读器的人理解表格的内容；
3. 非屏幕媒体：打印多页表格可以让您将<thead> 内容放在每一页的顶部，这样人们就可以理解这些列的含义，而无需翻回几页；李>
4. 样式： CSS 可以应用于<tbody> 元素、<thead> 元素，两者或其他组合。它为您提供了其他东西来编写选择器；
5. 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> 部分中的一行或多行中组合在一起，或者根据表格的结构和性质，成为每行中的第一个单元格。