i am using a container div inside which i have used a table. i am using equal padding on the left and right side of the container div for spacing purpose on left and right side.

for example the width of container div is 500px and left and right padding is 20px each so the width of the container is now 500-40 which is 460px so i have set the table width also to 460px

now when i start the table row the table data is not starting after the gap on the left side instead it is starting from the left edge of the container div, how do i make the table row and table data to start in a way that they leave a gap of 20px each on the left and right side.

my code is

<div id="container">
<table width="460" cellspacing="0" callpadding="0" border="0">
<tr>
<td>1</td>
<td>2</td>
</tr>


<tr>
<td>3</td>
<td>4</td>
</tr>


</table>
</div>

#container{
float: left;
width: 460px;
height: auto;
padding: 0 20px 0 20px;
}

Put margin on the table and remove the padding on the #container.