html - 空间 <td> 表均匀不均匀

Question

我一直在寻找在 <td> 之间添加空格的方法标签。

我抓取了以下关于我正在尝试做的事情的图片:

但是我无法复制相同的结果。任何帮助将不胜感激。

#sidebarright {
  float: right;
  width: 30%;
  padding: 0;
  margin: 0;
  padding-top: 20px;
}
#sidebarright a {
  color: grey;
}
.rightbuttons {
  background-image: url(./img/Resources_Button.jpg);
  background-repeat: no-repeat;
  padding: 14px 0 20px 11px;
}

<div id="sidebarright">
  <a href="#"><img class="buttonUlti" src="img/Pro.jpg" alt="Pro" /></a>
  <table width="100%;">
    <tbody>
      <tr>
        <th class="resstyle">Resources</th>
      </tr>
      <tr>
        <td class="rightbuttons"><a href="Form.cfm"Forms</a></td>
        <td class="rightbuttons"><a href="Postings.cfm">Job Postings</a></td>
      </tr>
      <tr>
        <td class="rightbuttons"><a href="Locations.cfm">Locations</a></td>
        <td class="rightbuttons"><a href="Com.cfm">Comp</a></td>
      </tr>
      <tr>
        <td class="rightbuttons"><a href="Care.cfm">Care</a></td>
        <td class="rightbuttons"><a href="Photos.cfm">Photos</a></td>
      </tr>
      <tr>
        <td class="rightbuttons"><a href="Safety.cfm">Safety</a></td>
        <td class="rightbuttons"><a href="Directory.cfm">Directory</a></td>
      </tr>
      <tr>
        <td class="rightbuttons"><a href="Alerts.cfm">Alerts</a></td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

CSS中cellpadding和cellspacing的一般概念之前已经回答过:
Set cellpadding and cellspacing in CSS?

在您的具体情况下，我看到的一些问题:
1) 在标签 'Forms' 之前缺少右尖括号
2) 可以通过将 border-spacing 属性应用到表格元素来控制间距(为了紧密模仿示例，使用单独的水平和垂直值
3) 背景图像被截断所描述的问题是由于图像未随 td 单元格的大小缩放。应用背景:宽度 100% 100%
4)使用填充设置单元格宽度被添加到单元格内容的长度，导致更长的标签(职位发布)比左列(位置)的最长标签获得更多宽度。使用 width: 50% 设置列宽相等。
5) 为了不影响 th，添加 colspan="2"(正如 Yasir 回答的那样)并将其设置为 text-align: left with some padding-left:

我只在下面粘贴了对 css 的修改

#sidebarright table {
  width: 100%;     /* moved from html  */
  border-spacing: 10px 15px;
}
.resstyle { padding-left: 10%; text-align: left; }
.rightbuttons {
  background-size: 100% 100%;
  width: 50%;
}