该表包含有关一组特定元素的数据,我希望该行的每个字段或所有行一起允许用户访问每个元素的详细信息。问题是我不知道如何进行,我要么:
将整行放在内<a>:
<table>
<a href=""><tr>…</tr></a>
<a href=""><tr>…</tr></a>
…
</table>
Run Code Online (Sandbox Code Playgroud)
或者只是将每个单元格的所有内容放入<a>:
<table>
<tr>
<td><a href="">…</a></td>
<td><a href="">…</a></td>
</tr>
…
</table>
Run Code Online (Sandbox Code Playgroud)
当然我更喜欢第一个,但是我不知道是否这样做是正确的。
这是我想到的用锚标记包围行的想法之一:
更新:
我想我必须对此更加清楚一点,该表保存的数据可以显示系统中的概览Users:
+----+------+-------+
| Id | Name | Score |
+----+------+-------+
| 1 | Foo | 10 |
| 2 | Bar | 8 |
| 3 | Baz | 5 |
| … | … | … |
| n | Zzz | 0 |
+----+------+-------+
Run Code Online (Sandbox Code Playgroud)
因此,我认为使用表格是正确的,但是每个用户都有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) |
+----+------+-------+-------------------------+
Run Code Online (Sandbox Code Playgroud)
但是我也不知道这是否也符合任何用户体验指南(在这种情况下,我认为它不如任何语义规则严格,而是更明智的解决方案)。当然,<a>对于每个不同的选项,我都会在同一字段(表单元格)中包含多个,但是我认为这并不违反任何语义规则。
如果您将链接应用于<tr>元素,则单击行上的任意位置将使用户链接。这包括不是表格单元格的空间,例如单元格边框。
<td>元素同样如此。将其放在内部仅链接文本,将其放在外部则链接整个元素。
<a href=""> <td></td> </a> //Links whole cell
<td> <a href=""></a> </td> //Only links text inside <a>
Run Code Online (Sandbox Code Playgroud)
您的两个选项都可以,但是它们应该做不同的事情。通常,标记整个表行在语义上是不正确的,因为这会导致链接重叠和其他问题。
您可以改用一些 JavaScript:
<table>
<tr onclick="window.location.replace='...'"></tr>
</table>
Run Code Online (Sandbox Code Playgroud)
有关它的更多信息: 链接整个表行?