Html 如何在表中的单元格之间添加空白？

我想用html和css做什么。。我希望第二行的每个按钮都位于第一行每个箭头的底部。。我的意思是我想在他们之间增加空间。我该怎么做

下面是第二行的html代码：

<table style="width:1160px; margin-top:10px"   cellspacing="10" cellpadding="0" bordercolor="#666666" >
<tr>
<td width="193px" class="button" ><img src="b2.png" /></td>

<td width="193px" class="button" ><img src="b2.png" /></td>
<td width="193px" class="button" ><img src="b2.png" /></td>
<td width="193px" class="button" ><img src="b2.png" /></td>
<td width="193px" class="button" ><img src="b1.png" /></td>
<td width="193px" class="button" ></td>
</tr>
</table>

---

有什么帮助吗？？？

为什么不使用相同宽度的按钮呢

.button{
    width:193px;

    //More Styles here ...
}

如果你想要空白的话，也可以算算

.button{
    width:188px;
    margin-right:5px

    //More Styles here ...
}

---

实现所需的最佳方法是使用一个包含div的容器，该容器将包含箭头和按钮这两个组件 现在浮动这个div并添加任意多的div

看看小提琴

  [http://jsfiddle.net/EHgr5/3/][1]

---

你能提供一把小提琴吗？你说的小提琴是什么意思？我不知道怎么用这个。。我应该在代码中添加什么来在单元格之间留出空格？第一行包含箭头图像的代码是什么？

.button {
    width: 152px;
    text-align:center;
    background:rgb(51,153,51);
    position:relative;
    overflow:hidden;
    margin:1px 10px 1px 1px; /* add this */
    float: left;
}
.button a{
    display:block;
    height:37px;
    color:white;
    line-height:100px;
    text-decoration:none;
    position:relative;
    z-index:10;
}
.button:before {
    content:" ";
    display:block;
    width:152px;
    height:37px;
    background:rgba(0,0,0,0.5);
    position:absolute;
    left:0;
    top:100%;
    transition:all 0.5s;
}
.button:hover:before {
    top:0;
}

  [http://jsfiddle.net/EHgr5/3/][1]