将表格行 <tr> 放在 <a> 标记中在语义上是否正确？

Question

此表包含有关特定元素集的数据，我希望行的每个字段或所有行都允许用户访问每个元素的详细信息。问题是我也不知道该怎么做：

将整行放入<a>：

<table>
    <a href=""><tr>…</tr></a>
    <a href=""><tr>…</tr></a>
    …
</table>

或者只是将每个单元格的所有内容放入<a>：

<table>
    <tr>
        <td><a href="">…</a></td>
        <td><a href="">…</a></td>
    </tr>
    …
</table>

当然我更喜欢第一个，但我不知道这样做是否正确。

这是我得到在锚标记中围绕行的想法的来源之一：

HTML5: Wrap Block-Level Elements with A’s

更新：

我想我必须更清楚一点，表格包含数据以显示系统中Users的概述：

+----+------+-------+
| Id | Name | Score |
+----+------+-------+
| 1  | Foo  | 10    |
| 2  | Bar  | 8     |
| 3  | Baz  | 5     |
| …  | …    | …     |
| n  | Zzz  | 0     |
+----+------+-------+

所以我认为使用表格是正确的，但是每个用户都有超过 3 个相关信息字段，所以我会使用链接来访问每个用户的详细信息（15 个以上字段），否则会显示太多在表格的单行上（例如，包含 2048 个以上字符的“评论”字段）；这就是为什么我想出了显示每个用户详细信息的链接的想法。当然我不在乎整行是否可点击，我只是想通过不必将每个字段的所有数据包围到<a> 中来稍微清理一下代码。另一种解决方案是创建一个额外的单元格来专门保存指向用户详细信息的链接，如下所示：

+----+------+-------+-------------------------+
| Id | Name | Score |         Options         |
+----+------+-------+-------------------------+
| 1  | Foo  | 10    | (detail) (misc. option) |
| 2  | Bar  | 8     | (detail) (misc. option) |
| 3  | Baz  | 5     | (detail) (misc. option) |
| …  | …    | …     | …                       |
| n  | Zzz  | 0     | (detail) (misc. option) |
+----+------+-------+-------------------------+

但我不知道这是否也适合任何用户体验指南（在这种情况下，我认为没有任何语义规则那么严格，并且是更明智的解决方案）。当然，对于每个不同的选项，我会在同一字段（表格单元格）中包含几个 <a>，但我认为这不违反任何语义规则。

Answer 1

如果您将链接应用到<tr> 元素，点击该行上的anywhere 会将用户转到该链接。这包括不是表格单元格的空间，例如单元格边框。

这同样适用于<td> 元素。放在里面只链接文本，放在外面链接整个元素。

<a href=""> <td></td> </a>  //Links whole cell
<td> <a href=""></a> </td>  //Only links text inside <a>

您的两个选项都有效，但它们应该做不同的事情。通常，标记整个表格行在语义上是不正确的，因为这会导致链接重叠和其他问题。

或者...

您可以使用 一点 的 JavaScript 代替：

<table>
    <tr onclick="window.location.replace='...'"></tr>
</table>

更多信息： Link entire table row?

Answer 2

您的第一个代码是无效标记，因为 <td> 只能是 <tr> 的子代。您可以使用您的第二个代码，但我建议您使用一些 JavaScript，如下所示：

for (i = 0; i < document.querySelectorAll('td').length; i++) {
  document.querySelectorAll('td')[i].addEventListener('click', function() {
    window.location.href = this.getAttribute('data-link');

  });
}

<td data-link="http://example.com">text and content</td>

Answer 3

如果您想“链接”整个“行”，那么您可能实际上没有表格数据，应该考虑table 元素以外的其他内容。

Answer 4

您的第二个选项是语义上正确的方法。如果您要做的只是向其中添加锚元素，那么您可能一开始就不需要该表。您可以将它们添加到两个单独的跨度中。