How To Make An Entire td A Link

Question

Before asking this question I tried researching and trying out the given results but to no avail could I make it so as soon as the cursor enters the td that you could click the link inside it. I have done it once before but can not remember or figure it out.

Here's the HTML:

<table>
<tr>

    <td class="nav" align="center" valign="center" width="125" height="35">
<ul class="nav"><li class="nav">
<font size="4" color="#BE2625">
<a href="#">
Home
</a>
</font>
</li></ul>
    </td>          

    <td class="nav" align="center" valign="center" width="125" height="35">
<ul class="nav"><li class="nav">
<font size="4" color="black">
<a href="">
Menu
</a>
</font>
</li></ul>
    </td>



        <td class="nav" align="center" valign="center" width="125" height="35">
<ul class="nav"><li class="nav">
<font size="4" color="black">
<a href="">
Info
</a>
</font>
</li></ul>
    </td>  

</tr>
</table>

Here's the CSS:

ul.nav{
    text-decoration: none;
    display: table-cell;
        padding: 0px;
        list-style: ;
    color: black;
    }

ul li.nav{
    float: left;
        width: 100%;
        text-align: center;
    text-decoration: none;
    list-style-type: none;
    color: black;
    padding: 0px;
     }

ul li.nav:hover{
    float: left;
    text-align: center;
    text-decoration: none;
    list-style-type: none;
    text-valign: bottom;
    color: black;
     }

ul li a{
    margin: 0px;
    display: table;
        padding: 5px 0px 5px 0px;
    text-decoration: none ;
    border: 1px solid;
    border-radius: 3px;
    border-color: transparent; 
    color: black;
    width: 100%;
    height: 100%;

    }

ul li a.nav:hover{
    text-align: center;
    background:transparent;
    color: black;
    width: 100%;
    height: 100%;
    display: table;
    }

ul li ul.nav{
    width: 25%;
    display: none ;
    color: black;
    }

ul li.nav:hover ul{
    float: center;
    opacity: .87;
    position: absolute;
        display: block; /* display the dropdown */
    color: black;

}

td.nav {
    border: 5px solid;
    border-radius: 100px;
    border-color: #FAEBD7; 
    color: black;
    background-color: #FAEBD7;
}

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

td a.nav: hover{
    width: 100%;
    height: 100%;
    display: table;
}

td.nav:hover{
    color: black;    
        background: #ed1a3b;
    border: 5px solid;
    border-radius: 100px;
    border-color: #FAEBD7; 
    }

Here's the jsfiddle:

http://jsfiddle.net/9kat4ztL/1/

Thank you for your help ahead of time, and if the question is not clear enough please let me know what is wrong and I'll make changes.

I'm trying to figure out why you're using a table for this, as well as deprecated or obsolete elements and attributes. — j08691, Dec 16 '14 at 02:57
Maybe you could use javascript or jquery to make your entire `` a link. — jpcanamaque, Dec 16 '14 at 02:59
Just the way I was taught, I understand divs, but I'm more comfortable with tables. — Mortuux, Dec 16 '14 at 02:59
@VitorinoFernandes No I'm working on making a Navigation Bar. — Mortuux, Dec 16 '14 at 03:03
possible duplicate of [how to make a td a link](http://stackoverflow.com/questions/3337914/how-to-make-a-td-a-link) — Matt Sanders, Apr 09 '15 at 04:55

score 2 · Accepted Answer · answered Dec 16 '14 at 03:08

2

Well, not mentioning your awful markup and inappropriate use of it, here's a way:

JSFiddle

The idea is to set position: relative for td and absolutely position a inside of it with top: 0;, left: 0;, display: block

answered Dec 16 '14 at 03:08

knitevision

3,023
6
29
44

score 1 · Answer 2 · answered Dec 16 '14 at 03:12

Make the menu with less html and css, also add styles for <a> tag instead of <li>

ul.nav {
  text-decoration: none;
  padding: 0px;
  list-style: none;
  color: black;
}
ul.nav li{
  display: inline-block;
  text-align: center;
  padding: 0px;
}
ul.nav li a {
  margin: 0px;
  text-decoration: none;
  border: 5px solid;
  border-color: transparent;
  color: black;
  background-color: #FAEBD7;
  display: block;
  border-radius: 100px;
  padding: 13px 44px;
}
ul.nav li a:hover {
  text-align: center;
  color: black;
  background: #ed1a3b;
  border: 5px solid;
  border-color: #FAEBD7;
}

<ul class="nav">
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="">Menu</a>
  </li>
  <li>
    <a href="">Info</a>
  </li>
</ul>

How To Make An Entire td A Link

2 Answers2