how to add empty space between cells in tables?

Sunday, July 6, 2014

enter image description here


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







http://ift.tt/1mlnbAE