How to make entire td a link?

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">&l开发者_如何学Got;/span></td> </a>

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

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.

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>

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;">

Define an OnClick event for the td:

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

If all you're doing is firing javascript, I'd suggest using onclick instead of an anchor tag in the first place, like:

<td id="cell123" onclick="chooseStyle('green-theme',360)">cell contents</td>

You can throw a simple css style on there if you want the mouse to become a pointer:

#cell123:hover { cursor: pointer; }

<table width="100%" class="blueCss">
    <tr>
        <td ID="tdBlue">
            <span id="Blue">Hello</span>
        </td>  
        <td>
            <span>other col</span>
        </td>
     </tr>
</table>

css file:

.blueCss {
        height: 100px;
        width: 100px;
    }

    .blueCss td {
        background-color: blue;
    }

    .blueCss:hover    {
        border-color: #00ae00;
    }

    .blueCss td:hover    {
        background-color: yellow;
        cursor: pointer;
    }

jQuery code:

$(document).ready(function(){
    var tdLink = $('#tdBlue');

    tdLink.click(function(){
         alert('blue-theme');
    });
});

Check here: jsFiddle.net

Use jquery with class
$("tr td.data_col").click(function() { window.location = $(this).find('a').attr("href"); });