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.
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.
You can use a bit of JavaScript instead:
<table>
<tr onclick="window.location.replace='...'"></tr>
</table>
More about it: Link entire table row?