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个以上字段）＃39;否则在桌面上的一行上显示太多（例如，一个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?

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

Answer 4

如果你想＆＃34;链接＆＃34;整个＆＃34;行＆＃34;，然后听起来你可能实际上没有表格数据，应该考虑除table元素之外的其他内容。

将表格行放在<a> tag?</a>内是否在语义上正确

4 个答案:

另外...