Is it semantically correct to put a table row <tr> inside an <a> tag?

Question

This table contains data about a certain set of elements and I want every field of the row or else all the row altogether to allow the user to access the detail of each element. The thing is that I don't know how to proceed, I either:

Put the entire row inside an <a>:

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

Or just put all the contents of every cell into an <a>:

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

Of course I'd prefer the first one, but I don't know wether or not it'd be correct to do that.

This is one of the source from I got the idea of surrounding the row in an anchor tag:

HTML5: Wrap Block-Level Elements with A’s

Update:

I think I have to be a little bit more clear on this, the table holds data to display an overview of the Users in the system:

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

So I think it's correct to use a table, but each user has more than 3 fields of related information, so I would use a link to reach every user's detail (15+ fields) that'd otherwise be too much to display on a single row on a table (e.g. a 'comment' field of 2048+ characters); that's why I came up to the idea of displaying a link to each user's detal. Of course I don't care if the entire row is clickable, I just want to clear up the code a little bit by not having to surround all the data of every field into an <a>. Another solution would be to create an extra cell to specifically hold a link to the user's detail, like this:

+----+------+-------+-------------------------+
| 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) |
+----+------+-------+-------------------------+

But I don't know if that would be appropiate according to any user-experience guidelines too (in which case I think is less strict than any semantical rules, and a more sensible solution). Of couse I would include several <a> in the same field (table cell) for every different option, but I think that doesn't go against any semantical rule.

Answer 1

If you apply a link to the <tr> element, clicking anywhere on the row will send the user to the link. This includes space that isn't a table cell, like the cell borders.

The same applies to the <td> element. Putting it inside links the text only, putting it on the outside links the whole element.

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

Both your options work, but they should do different things. Generally, tagging a whole table row is semantically incorrect, as that leads to link overlap and other problems.

Alternatively...

You can use a bit of JavaScript instead:

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

More about it: Link entire table row?

Answer 2

Your first code is invalid markup, as a <td> can be the child of only a <tr>. You could use your second code, but I would recommend using some JavaScript, like this:

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>