将表格行<tr>放在<a>标签内，在语义上是否正确？

Question

将表格行<tr>放在<a>标签内，在语义上是否正确？

3

这个表格包含一些元素的数据，我希望每个行字段或整行都可以让用户访问每个元素的详细信息。问题是我不知道该如何处理，我可以选择:

将整行放入一个<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

更新：

我认为我需要再清楚一些，这个表格包含了显示系统中用户概述的数据：

+----+------+-------+
| 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>以供每个不同选项使用，但我认为这不违反任何语义规则。

- arielnmz

5

第一个是无效的标记语言，所以不行，第二个是你最好的选择。 - tymeJV

1

如果您想要能够点击表格行，则需要使用Javascript为其添加单击监听器。 - Barmar

2

@tymeJV 最近我读到HTML5中放置块级()元素是语义上正确的，它给出了关于<div>、<h*>和其他元素的示例，但没有提及<tr>。有关信息请参见此处：http://davidwalsh.name/html5-elements-links。 - arielnmz

@Barmar 我更喜欢避免使用js，因为我正在遵循非侵入式的javascript开发。 - arielnmz

<tr>不是块级元素，所以它不起作用。实际上，HTML解析器会将<a>元素从表格中排除。 - Alohci

显示剩余2条评论

4个回答

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>

- Ian Hazzard

也许类似这样的东西？https://dev59.com/U2445IYBdhLWcg3wWZAU - unbindall

1

你的第二个选项是语义上正确的方法。如果你只是要添加锚点元素，那么你可能一开始就不需要使用表格。你可以将它们添加到两个单独的元素中。

- user2580104

1

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

- Daniel

该表格保存了一组“用户”的数据，每一行都是指向用户详细信息的链接。因此，我认为使用表格来概述用户是合适的，将整个行（而不仅仅是名称）链接起来的想法是每个字段都与同一个用户相关联的（尽管我会考虑包含一个额外的字段专门用于保存到用户详细信息的链接）。 - arielnmz

2

那就是表格数据了。一个常见的习语是仅链接自己的列，或者有一个明确的“按钮”用于进入详细信息。这时，“JavaScript”路线可能对您有意义。 - Daniel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- unbindall · Accepted Answer

如果您将链接应用于<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>

更多信息：如何链接整个表格行？