HTML 表格：间距超链接答案

【问题标题】：HTML Tables: Spacing HyperlinksHTML 表格：间距超链接
【发布时间】：2013-09-09 08:36:20
【问题描述】：

我需要帮助，我被困在最琐碎的事情上！我的课堂作业是做一个网站，我已经完成了我模板上的基本布局，但是卡在了超链接表上。

我无法让超链接在每个表格设置之间留有间隙！相反，结果是所有单词（带空格），但所有空格都有下划线！

（注意字有下划线） Kinda_Like_This

这是我的代码：

    <style type="text/css">
    table {position:relative; top:15px;left:15px; letter-spacing:5px;}
bottomTable {position:relative; top:100px;left:16px;}

<table>
    <td><a href="http://www.foxnews.com">  Foxnews </a></td>
<td><a href="http://www.pbs.org">PBS </a></td>
<td><a href="http://www.bing.com"> Bing </a></td>
<td><a href="http://www.google.com"> Google </a></td>
<td><a href="http://www.blogger.com"> Blogger </a></td>

我一直在http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-image 尝试它。关于我做错了什么有什么建议吗？

【问题讨论】：

该链接将我们带到背景图像“教程”。
@BeatAlex 是的，人们应该使用jsfiddle.net进行测试和发布
BeatAlex，这是我用来显示我的代码的。它将如何在网上出现（抱歉，我之前没有提到）。我使用了 jsbin.com，但在我的 Mac 上它有问题。我肯定会马上调查这些答案。

标签： html css href html-table

【解决方案1】：

您必须使用padding 而不是letter-spacing，并且您没有正确结束样式标签

Demo

css

table {        
    top:15px;
    left:15px;     
  }

td{
padding:10px;
}

HTML

<table>
    <td><a href="http://www.foxnews.com">  Foxnews </a></td>
    <td><a href="http://www.pbs.org">PBS </a></td>
    <td><a href="http://www.bing.com"> Bing </a></td>
    <td><a href="http://www.google.com"> Google </a></td>
    <td><a href="http://www.blogger.com"> Blogger </a></td>
</table>

【讨论】：

我不敢相信我不明白什么是填充，这么简单！ :) 谢谢 Thirumalai murugar 的简单解释！
@HowbeitGirl 欢迎您。我希望你现在已经理解了这个概念，table 是你可以通过ul 来实现这一点的旧方法，你可以为此投赞成票:)

【解决方案2】：

使用填充在超链接和文本装饰之间拉开距离：如果有下划线，则无删除

a {
text-decoration: none;
}

table {
position:relative; 
border: 1px solid red; 
top: 10px; 
left: 10px;
}

td {
padding: 10px;
}

bottomTable {
position:relative;
top:100px;
left:16px;
}

【讨论】：

【解决方案3】：

在锚点外添加空格像这样：

<td> <a href="http://www.foxnews.com">Foxnews</a> </td>

【讨论】：