如何链接表格单元格？答案

【问题标题】：How to link a table cell?如何链接表格单元格？
【发布时间】：2012-05-11 14:59:20
【问题描述】：

我需要在母版页文件上设置一个链接。所以我为表格列（<td>）设置了一个背景图像，并分别给出一些字体作为“home”。现在我设置“onclick”事件并将其从<td> 重定向到页面。但它在浏览器上的图像底部提供了一些空间。所以链接（手形符号）从下面的空格开始到按钮图像。我检查了所有边距设置、填充等。但它不起作用。所以现在我决定为背景图片设置一个href。是否有可能或任何其他方式来纠正这个问题？我在互联网上找到了一些帮助。但我不知道如何使用此代码。我在这篇文章中附上了帮助代码。

我的代码：

<tr style="height:44px;">
            <td id="Homebutton" runat="server" style="height: 44px; width: 101px; cursor: pointer;"
                class="menubuttonhome" align="center" onclick="navigate(id)" onmouseover="this.className='menubuttonhomefocus'"
                onmouseout="this.className= 'menubuttonhome'">
                Home
            </td>
</tr>

css 文件

.menubuttonhomefocus
        {
            background-image: url('Images/homebuttonfocus.png');
            background-repeat: no-repeat;
            vertical-align: top;
            color: White;
            padding-top: 11px;
            font-family: Arial;
            font-size: 10pt;
            font-weight: 500;
        }

来自互联网的帮助代码

a.particular-link {display: block; /* or inline-block; I think IE would respect it since a link is an inline-element */
                   background: #fff url(path/to/image.gif) top left no-repeat; 
                   text-align: center;
                   line-height: 50px; }

【问题讨论】：

描述非常混乱，似乎假设了一些不可能的事情（您不能创建背景图像链接，尽管您可以将背景图像分配给链接）。请重新表述，并解释为什么不能使用简单的链接<a href=...>...</a>。
如果我把它做成简单的href链接..它会在图像下方留下一些空格。这意味着当我们单击空白区域时，它会重定向到其他页面。这就是为什么我只希望它作为背景图片。

标签： html css background href

【解决方案1】：

HTML

<tr>
  <td id="Homebutton" runat="server" class="menubutton">
    <a href="home.html">Home</a>
  </td>
</tr>

CSS

td {
  padding: 0;
}

.menubutton > a {
  display: block;
  width: 101px;
  height: 44px;
  background-repeat: no-repeat;
  vertical-align: top;
  padding-top: 11px;
  color: white;
  text-align: center;
  font-family: Arial;
  font-size: 10pt;
  font-weight: 500;
  cursor: pointer;
}

#Homebutton {
  background-image: url(Images/homebutton.png);
}

#Homebutton:hover {
  background-image: url(Images/homebuttonfocus.png);
}

注意悬停效果只需要使用:hover 伪类。

顺便说一句。图像底部的空间是为文本保留的。 IE。如果你写了一些文字，它会出现在图片下方。

【讨论】：

非常感谢老兄。然后是另一个问题。我桌子的总高度是 86 像素。我把它分成两行，第一行是 42px。那么第二行是 44 像素。我的主页按钮图片在第二行。图片大小也是 44 像素。但它在第二行（主页按钮图像下方）留下了一些空间，这是我面临的问题。但现在我将高度从 44 降低到 35。现在效果很好。这是怎么发生的伙计？那是文本空间还是其他问题？
有什么办法可以避免图片下方的空格？
这是为文本保留的空间。例如。如果你将 'font-size' 设置为 'line-height' 为 0，它也会消失。
感谢您让我认识塞巴斯蒂安。非常感谢:)
没问题。 CSS（尤其是 CSS3）可以实现很多，这在以前是不可能的，或者您需要解决方法/黑客。要了解更多信息，我建议您阅读例如developer.mozilla.org/en/CSS.

【解决方案2】：

正如 Jukka 已经提到的，无法设置指向通过 CSS 应用的背景图像的链接。

您应该真正使用<a> 标签。诀窍是将链接的高度强制为图像的高度。

例子：

<!DOCTYPE html>
<html>
  <head>
    <title>Image link</title>
    <style type="text/css">
      td {
        padding: 0;
      }
      a {
        display: block;
        height: 89px;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td style="background-color: blue;"><a href="#asdf"><img src="http://getfirebug.com/img/firebug-logo.png" style="background-color: yellow;"/></a></td>
      </tr>
    </table>
  </body>
</html>

虽然我还想指出，您应该永远不要使用表格进行布局。有several good reasons 不使用表格布局。相反，您可以使用例如<div>s、<header>s 和 <section>s。

【讨论】：

我明白老兄。但是我如何在该图像上输入文本“家”？你会有什么想法吗？请帮助我
请参考我上面的代码。在此与背景图像分离的主词。这就是为什么我将按钮图像设置为背景图像。有没有其他的想法？
感谢您抽出宝贵的时间。