Html 如何使整个td成为链接

在问这个问题之前，我试着研究和尝试给出的结果，但没有用，我可以这样做，一旦光标进入td，你可以点击其中的链接。我以前做过一次，但记不住也弄不明白

以下是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>

以下是JSFIDLE：

---

提前感谢您的帮助，如果问题不太清楚，请告诉我问题出在哪里，我将进行更改。

好吧，不要提及您糟糕的标记和不恰当的使用，这里有一个方法：

---

想法是为

td

设置

position:relative

，并使用

top:0将
a
绝对定位在其内部，
左：0，
显示：块
使用较少的html和css创建菜单，同时为






我正在试图弄清楚为什么要使用表以及不推荐或过时的元素和属性。按照我所学的方法，我理解div，但我更喜欢使用表。也许你可以使用javascript或jquery将整个
作为链接。你正在使用电子邮件模板吗？这是一封电子邮件吗？@VitorinoFernandes不，我正在制作一个导航栏。
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; 
    }