ansaurus

Question

What is the most standard and compatible way to make a whole table row into a link?

Answer 1

A:

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 2010-05-20 17:32:50

He asked to do it without Javascript.

Pointy 2010-05-20 17:33:31

Answer 2

+1 A:

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 2010-05-20 17:33:08

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.

David Dorward 2010-05-20 17:47:22

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 `<tr>`. I don't know enough about that however. (Oh, looking at your solution I see what you're getting at.)

Pointy 2010-05-20 17:59:20

Answer 3

A:

<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 2010-05-20 17:34:14

Table in table just for link? I don't think it's a good idea.

prostynick 2010-05-20 17:48:05

It's totally invalid HTML to put a table inside an `<a>` tag. (*edit:* except in HTML5, but I don't know whether IE6 would like it)

Pointy 2010-05-20 17:55:44

Just attempting to provide viable solutions to the mate. He does not want JavaScript examples. :) @prostynick There are some "I don't think it's a good idea" within this question.

Riley 2010-05-20 17:58:43

Answer 4

+4 A:

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.

David Dorward 2010-05-20 17:44:44

Answer 5

A:

This works only in IE8+, not at all in other browsers- they accept the display:table-row but do not enable the link. Its not a good option- But it was worth a try.

<table border="1">
    <thead>
        <tr><th>Name</th><th>Number of widgets</th></tr>
    </thead>
    <tbody>
        <tr><td>Bob Smith</td><td>Three</td></tr>
        <a style="display:table-row" href="../../index.html"><td>Chuck Norris</td><td>Infinity+1</td></a>
    </tbody>
</table>

kennebec 2010-05-20 19:43:03

The HTML is invalid.

David Dorward 2010-05-20 20:15:58

ansaurus

tags:

views:

answers:

What is the most standard and compatible way to make a whole table row into a link?

related questions