如何制作表超链接的单元格

时间:2012-04-09 07:28:46

标签: html hyperlink href

如何在没有javascript或jquery的情况下在html中对整个表格单元进行超链接?

我试图将href放在td标签本身,但它至少在chrome 18

中不起作用
<td href='http://www.m-w.com/dictionary/' style="cursor:pointer">

10 个答案:

答案 0 :(得分:32)

试试这个:

HTML:

<table width="200" border="1" class="table">
    <tr>
        <td><a href="#">&nbsp;</a></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

CSS:

.table a
{
    display:block;
    text-decoration:none;
}

我希望它能正常运作。

答案 1 :(得分:17)

尝试这种方式:

<td><a href="..." style="display:block;">&nbsp;</a></td>

答案 2 :(得分:12)

轻松使用onclick功能和javascript链接:

<td onclick="location.href='yourpage.html'">go to yourpage</td>

答案 3 :(得分:7)

我一直在寻找解决方案,只是在另一个网站上找到了这个代码:

<td style="cursor:pointer" onclick="location.href='mylink.html'">link</td>

答案 4 :(得分:2)

为什么不将onclick方法与<a>内的<td>元素结合用于非JS的备份?似乎工作得很好。

<td onclick="location.href='yourpage.html'"><a href="yourpage.html">Link</a></td>

答案 5 :(得分:1)

这是我的解决方案:

<td>
   <a href="/yourURL"></a>
   <div class="item-container">
      <img class="icon" src="/iconURL" />
      <p class="name">
         SomeText
      </p>
   </div>
</td>

(LESS)

td {
  padding: 1%;
  vertical-align: bottom;
  position:relative;

     a {
        height: 100%;
        display: block;
        position: absolute;
        top:0;
        bottom:0;
        right:0;
        left:0;
       }

     .item-container {
         /*...*/
     }
}

像这样你仍然可以从像vertical-align这样的表格单元格属性中受益。(在Chrome上测试)

答案 6 :(得分:1)

<强>问题:

(用户:Kamal)这是一个好方法,但你忘记了垂直对齐问题!使用这种方式,我们不能将链接准确地放在TD元素的中心!即使是vertical-align:middle;

(用户:基督)你的答案是最好的答案,因为没有任何对齐的问题,而今天每个人都需要JavaScript ...它甚至在一个旧智能的每个地方手机......默认情况下启用...

我建议完成(用户:基督)的回答:

HTML:

<td style="cursor:pointer" onclick="location.href='mylink.html'"><a class="LN1 LN2 LN3 LN4 LN5" href="mylink.html" target="_top">link</a></td>

CSS:

a.LN1 {
  font-style:normal;
  font-weight:bold;
  font-size:1.0em;
}

a.LN2:link {
  color:#A4DCF5;
  text-decoration:none;
}

a.LN3:visited {
  color:#A4DCF5;
  text-decoration:none;
}

a.LN4:hover {
  color:#A4DCF5;
  text-decoration:none;
}

a.LN5:active {
  color:#A4DCF5;
  text-decoration:none;
}

答案 7 :(得分:0)

在人们尝试制作日历之前,我已经看过了。你想要链接的单元格,但不想弄乱其中的任何其他东西,尝试这个,它可能会解决你的问题。

<tr>
<td onClick="location.href='http://www.stackoverflow.com';">
Cell content goes here
</td>
</tr>

答案 8 :(得分:0)

不是完全使单元格成为链接,而是表本身。我用它作为电子邮件中的按钮,给了我类似div的控件。

<a href="https://www.foo.bar" target="_blank" style="color: white; font-weight: bolder; text-decoration: none;">
  <table style="margin-left: auto; margin-right: auto;" align="center">
    <tr>
      <td style="padding: 20px; height: 60px;" bgcolor="#00b389">Go to Foo Bar</td>
    </tr>
  </table>
</a>

答案 9 :(得分:0)