How to make entire td a link?

Question

How do I make this entire td a link?

<td id="blue-border"><span id="blue"></span></td>

Clicking td should make it behave like this (I know this is syntactically incorrect:

<a href="javascript:chooseStyle('blue-theme', 360)"> <td id="blue-border"><span id="blue"></span></td> </a>

EDIT: so far all the suggestions are only making the span inside the td a link, help lol.

Answer 1

Use CSS.

td a { display: block; width: 100%; height: 100%; }

<table style="width: 100%">
  <tr>
    <td><a href="#">Link</a></td>
  </tr>
</table>

The CSS forces the link to expand to the full width and height of the TD.

Answer 2

You can't wrap a td in an anchor. Do this:

<td id="blue-border"><a href="javascript:chooseStyle('green-theme', 360)"> <span id="blue"></span></a></td> 

Or

<td onclick="chooseStyle('green-theme', 360)" id="blue-border"><span id="blue"></span></td>

Answer 3

Add an anchor tag inside of the td and set its display attribute to block. This should make the entire td clickable.

#blue-border a{
    display: block;
}

or

<a href="link" style="display:block;">