6

Obviously you can't just surround the <tr> tag with an <a> tag and call it a day; this is invalid and doesn't even work. I have seen JavaScript used, but then what happens to browsers that don't support JavaScript? What is the best way to make an entire table row <tr> into a link?

Edit: At the request of Lerxst, here is an example of a table with some rows:

<table>
    <thead>
        <tr><th>Name</th><th>Number of widgets</th></tr>
    </thead>
    <tbody>
        <tr><td>Bob Smith</td><td>Three</td></tr>
        <tr><td>Chuck Norris</td><td>Infinity+1</td></tr>
    </tbody>
</table>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Ricket
  • 33,368
  • 30
  • 112
  • 143
  • Can you post an example of your table row? – Greg Olmstead May 20 '10 at 17:30
  • 1
    My personal opinion -- and I know most will disagree, is to use Javascript. The browsers and people that don't support Javascript are incredibly small and are missing much of the internet. Another way which is possible, is to recreate the table framework using divs and have an anchor act as a tr (display block) – Kerry Jones May 20 '10 at 17:31
  • I don't disagree. In this day and age it's silly to worry about that as much as most doctrinaire web-heads do. With the modern accessibility attributes supported in HTML5, you really don't even have to worry about that - accessibilty support can actually be *better*. – Pointy May 20 '10 at 17:35
  • 1
    Honestly, if javascript isn't supported, neither is half the internet these days. Use javascript - http://imar.spaanjaars.com/312/how-do-i-make-a-full-table-row-clickable – Brian Roach May 20 '10 at 17:35
  • You asked what happens to browsers that don't support JavaScript. My answer is: their users will get, what they are asking for - not everything or not workable website. – prostynick May 20 '10 at 17:51
  • Very similar in nature to http://stackoverflow.com/questions/890743/click-entire-row-preserving-middle-click-and-ctrlclick – Roatin Marth May 20 '10 at 18:16
  • 2
    David Dorward's excellent answer uses a progressive enhancement approach that makes the whole row clickable without arbitrarily deciding that blind people don't deserve to use the interweb. (@prostynick: My friend Doug didn't *ask* to be blind or to browse without javascript) – Stephen P May 20 '10 at 20:13
  • Stephen, of course I agree - David's answer is the best choice, but still - JS is used. I would probably do exactly the same. Simple way of building good solutions IMO - first make it right for non JS, then using JS manipulate with DOM to add/remove some elements or events. But my sentence is still the same - non JS users will get, what they want, because in this situation you cannot make whole row clickable without putting `` in every cell, and I don't think that non JS users would be glad to see such a solution. Regards – prostynick May 21 '10 at 07:03

5 Answers5

4

My preference would be to put a link in the most logical cell for it (probably the name), then add an event handler along the lines of:

 tr.onclick = function (e) {
     location.href = this.getElementsByTagName('a')[0].href;
 }

Non-JS clients would still be able to use the regular link.

More efficiently, attach the event handler to the table and use the event object to find the element with the click and then climb up the tree of parents until it hit a row. This is probably best achieved with a library such as YUI or jQuery.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
1

If you are willing to forego the TABLE, the below solution is the most simple and doesn't require JavaScript:

<style type="text/css">
.table {
    border-collapse:collapse;
    border-spacing:0;
    display:table;
}
 .table .row {
    display:table-row;
}
 .table .cell {
    display:table-cell;
}    
</style>

<section class="table">
  <a class="row" href="#">
    <div class="cell">
      A
    </div>
    <div class="cell">
      B
    </div>
    <div class="cell">
      C
    </div>
  </a>
</section>
Alfred
  • 21,058
  • 61
  • 167
  • 249
Jorn Mineur
  • 31
  • 2
1

Without Javascript support, you simply can't. A link is a link, and a table row is a table row (that is, an <a> is an <a> and a <tr> is a <tr>). Table rows and most other markup elements have no "natural" link-like behavior. The best you can do is fill all your table cells with <a> tags around the content. edit: Note that you would want to tweak the styles so that the <a> tags are laid out such that they completely fill the table cells; maybe make them display: block for starters.

Or you could use Javascript.

Pointy
  • 405,095
  • 59
  • 585
  • 614
  • 1
    The trouble with putting a link in *every* cell is that non-pointer users then have to tab through multiple copies of what are (essentially) the same link. It makes for a horrible experience. – Quentin May 20 '10 at 17:47
  • I completely agree. Of course, keyboard navigators are going to have it rough with a Javascript solution too, unless maybe some ARIA attributes could be added to the ``. I don't know enough about that however. (Oh, looking at your solution I see what you're getting at.) – Pointy May 20 '10 at 17:59
0

LINK

pretty much you give the appearance of having the row act as a link, by having CSS change colors to represnt links and create on mouse over and on click events that react and redirect to the appropriate change, the link eplains how to do that

the fallback could be add a tag link to the code if JS is not available, that way people without JS can still use the link included in the row. so you have a fallback option

Justin Gregoire
  • 2,606
  • 1
  • 20
  • 9
0
<html><head>
    <style type="text/css">
    table a { display: block; }
    table a:hover { background: yellow; }
    .name { display: block; float: left; width: 300px; }
    </style>

</head><body>
        <table>
        <thead>
            <tr><th class="name">Name</th><th>Number of widgets</th></tr>
        </thead>
        <tbody>
            <tr><td colspan="2"><a href="#"><span class="name">Bob Smith</span>Three</a></td></tr>
            <tr><td colspan="2"><a href="#"><span class="name">Bob Smith</span>Three</a></td></tr>
        </tbody>
    </table>

</body></html>
Riley
  • 403
  • 3
  • 12