Wrapping HTML table rows in tags

Question

Is it possible to wrap entire table rows in tags? I want the the entire row to be a clickable link.

If I try the following, the links get rend

Answer 1

Just in additional to others I have to add that I personnaly prefer to do like this

<tr onclick="window.location='http://www.google.com';" >
  <td>Text...</td>
</tr>

in case of ASP.NET MVC do it like

<tr onclick="window.location = '@Url.RouteUrl("Product", new { SeName = @product.SeName })';">

Answer 2

as a link in each td is not a good alternative and using js is a bit dirty, here is another html/css approach:

HTML:

<div class="table">
    <a class="table-row" href="/mylink">
        <div class="table-cell">...</div>
        <div class="table-cell">...</div>
        <div class="table-cell">...</div>
    </a>
</div>

CSS:

.table { display:table; }
.table-row { display:table-row; }
.table-cell { display:table-cell; }

Answer 3

It renders like that because the browser is respecting the W3C specification and only allowing <tr> tags as direct descendents of <table>.

As a solution, you could either put an <a> tag inside each <td> that points to the same URL:

<table>
    <tr>
        <td>
            <a href="http://url/stuff">
                First column
            </a>
        </td>
        <td>
            <a href="http://url/stuff">
                Second column
            </a>
        </td>
    </tr>
</table>

Or you could bind an onClick handler to the <tr> with JavaScript. A jQuery example would be this:

$('table tr').click(function() {
    window.location = 'http://location/here';
});

Or, even better, use delegated events (jQuery 1.7+):

$('table').on('click', 'tr', function() {
    window.location = 'http://location/here';
});