html - 将表格行 <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>

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

这是我想到用 anchor 标记包围该行的来源之一:

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>元素，点击行上的任意位置 会将用户转到该链接。这包括非表格单元格的空间，例如单元格边框。

这同样适用于 <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?