HTML TD Clickable

I have a menu you can see on the top right hand side - www.balibar.co

HTML:

    <div id="joinHeader" class="shadow">
            <table id="indexNavigation"><tr>
                <td><a id="navSearch">Search</a></td>
                <td><a id="navLanguages">Languages</a></td>
                <td id="activeNavLink"><a id="navLogin">Login</a></td>
            </tr开发者_JS百科></table>
    </div>

CSS:

 table#indexNavigation {
width: 100%;
height: 25px;
font-weight: normal;
font-size: 1.1em;
border-collapse: collapse;
 }

 table#indexNavigation td {
text-align: center;
color: white;
width: 33.33%;
border-right: 1px solid #FFF;
cursor: pointer;
 }

table#indexNavigation td#activeNavLink {
border-right: none;
 }

I want to make the entire TD Clickable. I've added cursor: pointer; to the TD but it doesn't light up except when over the words. I tried putting the <a> outside the <td> but this didn't work.

Is there a trick to make this clickable. Will then hook this up to jQuery for a click event - e.g.:

 $('td#activeNavLink').click(function() {

Just make your links inside your td tags have a width of 100%. Then they will take up the full width of the cell.

table#indexNavigation td a {
    display: block;
    width: 100%;
    text-align: center;
}

You should use a display:block in your CSS.

Here's an example from an unordered list (ul) with block-links: link

you have two options

1. by css only

   here you actually make the anchor tag a block element, give it full width and height to make it as big as the table cell...

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

   remark you might need to move some paddings and such from the TD element to the A element

2. by javascript

   this means, adding a click event to the td element, and then triggering the click from the anchor element that's inside that table cell.

   $('#mytable td').each(function(){
     $(this).css({'cursor': 'pointer'}).click(function(){
       $(this).find('a:first').trigger('click');
     });
   });