how to add empty space between cells in tables?

Vote count:

0

what i want to do with html and css .. that i want each button on the second row to be on the bottom of each arrow on the first row .. i mean i want to add space between them . how can i do this??

here is my html code for the second row :

<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>

and here is the css for class button :

.button {
    width:152px;
    text-align:center;
    background:rgb(51,153,51);
    position:relative;
    overflow:hidden;
    margin:1px;
    float: left; /* add this */
}
.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;
}

any help??

asked 20 secs ago

user3675605

16