Hyperlink a row?

[cweaver]

Anyone know how to hyperlink a row? I want the whole row to be linked:

<a href='WebStatsYearsAndPeriods.php'>
 <tr>
  <td>$Year</td>
  <td>$Period</td>
 </tr>
 </a>

[Mittineague]

Maybe

 <tr>
  <td><a href='WebStatsYearsAndPeriods.php'>$Year</a></td>
  <td><a href='WebStatsYearsAndPeriods.php'>$Period</a></td>
 </tr>

[cweaver]

Surely that does produce a similar effect, but without a bunch of Javascript, it doesn't produce the a:link, a:hover, a:visited effect. Instead it gives the impression that there are two individual links per row, whereas the idea is for there to be one link for the entire row.

It's a puzzlement! I just don't get why it doesn't work.

[Mittineague]

It must be something to do with block level elements as opposed to inline elements and what can be inside what. Have you tried

<tr>
<a href='WebStatsYearsAndPeriods.php'>
  <td>$Year</td>
  <td>$Period</td>
</a>
 </tr>

[cweaver]

I just tried it. Same results -- nothing.

I think you're right; it's got something to do with the block level status of the elements in question. I should stop wondering about it and read up on the subject. Wouldn't be surprised to find the W3C docs saying "you can't hyperlink a row!"

[Mittineague]

It seems that table, tr, and td are block level elements (I don't see why td would be, but .... ) and a is an inline element. Inline elements can only have other inline elements in them, so table, tr, and td are out. http://www.ahuka.com/htmllevel1/blocklevel.html

[AutisticCuckoo]

tr, and td are block level elements (I don't see why td would be, but .... ) and ... [i]nline elements can only have other inline elements in them

You answered your own question.
If TDs were inline elements, you couldn't put anything but inline elements into them. Sometimes you may want to put an UL or OL, or even a DIV, inside a TD. Thus the TD must be a block-level element.

@cweaver: there is no way to create a link out of an entire table row, using only HTML. You could do it with JavaScript, or if you're just after the :hover effect you can fake that with CSS in modern browsers. (IE won't play along, though.)