How to have a hyperlink for a table row

without using JavaScript

[g4oliver]

I have a table on <Sorry, no personal URLs. See TOS [webmasterworld.com]>
that uses JavaScript to go to a page when a user clicks on a row in a table:
<tr class="rowa" onclick="location.href = '?event=mar3apr7';" style="cursor:pointer">
Linking this way poses three problems:
- A user cannot right-click/control-click/command-click to open the link in a new window/tab
- A user cannot see where the hyperlink will lead to in the browser's status bar
- Googlebot and other spiders will not find the page

Is there any way to link with a standard <a> tag, and still let the user click on the entire row?

[edited by: tedster at 11:29 pm (utc) on April 9, 2004]

[claus]

Welcome to WebmasterWorld g4oliver :)

Unfortunately, posting your URL is against the TOS of this board, so i expect a moderator will remove it if you don't do so yourself.

As for your problem, can't you do like this:

<a href="something"><tr class="rowa"> ... </tr></a>

?

[tedster]

claus, if you run that through an HTML validator you will see that you cannot nest table row elements (or table cells either) inside an anchor tag -- because an anchor tag is an inline element. I believe it may work in some browsers, but it's not valid mark-up.

The only approach I can think of would be to use absolute positioning and a z-index to place a linked clear.gif directly over the table row.

[claus]

>> it's not valid mark-up

No, it's not. I should not have posted it, as i otherwise try to promote good coding practices. Sorry about that.

Okay then... here's the validating version:

You'll have to convert your <tr> to a <div> and use <span> in stead of <td>, which might not be semantically correct if it is tabular data, but it will validate in HTML 4.01 Transitional. Example; row "a", two cells/columns:

-------------------------------
<div class="rowa">
<a href="something"><span class="c1"> .1. </span><span class="c2"> .2. </span></a>
</div>
-------------------------------

Use CSS to make it look like the table you have now, it's just as easy. Note that the anchor is inside the div - an anchor around a div is not valid markup in HTML 4.01 Transitional.