3

有必要<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>

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

4

7 回答 7

14

根据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>您可以在表格行中使用的两种单元格类型之一（另一种是 ）。A<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>部分中的一个或多个行中组合在一起，或者成为每行中的第一个单元格，具体取决于表格的结构和性质。

于 2010-02-17T02:59:26.940 回答
5

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

于 2010-02-17T03:06:22.883 回答
3

不，没有必要拥有 th。但它看起来不像你使用的权利。通常，每列都有一个。正确使用 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>
于 2010-02-17T02:59:10.903 回答
0

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

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

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

th可以出现在任何里面tr，不管它在哪里tr。

于 2010-02-17T03:00:19.777 回答
0 
<table>
     <tr>
        <td>text</td>
     </tr>      
</table>

这是我能想到的最小表。

于 2010-02-17T03:01:17.217 回答
0

好处是语义。<th>表示表头。_ _ 使用它来标记列的标题。一般在一个<thead>.

于 2010-02-17T03:11:12.423 回答
0

答案是

是的！

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

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

识别那些赋予行和列意义的单元格而不是仅包含数据的单元格是很重要的。

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

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

只有给行和列命名时，数字才有意义。这些名称使用以下标记<th>：

    2 月 5 月 8 月 11 月
ITH 
JFK 
IST

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

选定机场的月平均气温
    2 月 5 月 8 月 11 月
ITH 
JFK 
IST

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

选定机场的月平均气温
    2 月 5 月 8 月 11 月
ITH 
JFK 
IST
以°F 为单位的温度。资料来源：出版物 #456 MNMO

表的标题进入<caption>。当表变大时， <thead>and<tfoot>部分特别有用。有关示例，请参阅打印大型 HTML 表格时如何处理分页符。

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

于 2010-02-17T03:20:05.673 回答