title: How to have equal distance between the columns in a table
body: <p>I'm new to HTML and CSS. I have created a table where the distance between first and the second column is correct where as the distance between second and third column and the distance between third and forth column is greater than the first one. I want the distance between the second and third column and the distance between the third and forth column  should be same as that of first and second column. How can I reduce this distance.<br>
  <strong>HTML</strong></p>
  
  <pre><code>&lt;table class="img_table"&gt;
  &lt;tr&gt;
  &lt;td&gt;
  &lt;img src="./images/FACILITIES.PNG"/&gt;
  &lt;p&gt;&lt;center&gt;FACILITIES&lt;/br&gt;MANAGEMENT&lt;/center&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td&gt;
  &lt;img src="./images/RESALE.PNG"/&gt;
  &lt;p&gt;&lt;center&gt;RESALE&lt;/br&gt;&amp; RENTALS&lt;/center&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td&gt;
  &lt;img src="./images/AIR_CONDITIONER.PNG"/&gt;
  &lt;p&gt;&lt;center&gt;AIR CONDITIONER&lt;/br&gt;SERVICES&lt;/center&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td&gt;
  &lt;img src="./images/DEEP_CLEANING.PNG"/&gt;
  &lt;p&gt;&lt;center&gt;DEEP CLEANING&lt;/br&gt;&amp; JANITORSERVICES&lt;/center&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;
  &lt;img src="./images/INTERIOR.PNG"/&gt;
  &lt;p&gt;&lt;center&gt;INTERIOR&lt;/br&gt;WORK&lt;/center&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td&gt;
  &lt;img src="./images/PAINTING.PNG"/&gt;
  &lt;p&gt;&lt;center&gt;PAINTING&lt;/br&gt;WORK&lt;/center&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td&gt;
  &lt;img src="./images/LANDSCAPING.PNG"/&gt;
  &lt;p&gt;&lt;center&gt;LANDSCAPING&lt;/br&gt;WORK&lt;/center&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td&gt;
  &lt;img src="./images/PEST_CONTROL.PNG"/&gt;
  &lt;p&gt;&lt;center&gt;PEST CONTROL&lt;/br&gt;WORK&lt;/center&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;
  &lt;img src="./images/SECURITY.PNG"/&gt;
  &lt;p&gt;&lt;center&gt;SECURITY&lt;/br&gt;SERVICES&lt;/center&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td&gt;
  &lt;img src="./images/CONCIERGE.PNG"/&gt;
  &lt;p&gt;&lt;center&gt;CONCEIRGE&lt;/br&gt;SERVICES&lt;/center&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;td&gt;
  &lt;img src="./images/MOBILE_LANDLINE.PNG"/&gt;
  &lt;p&gt;&lt;center&gt;MOBILE/LANDLINE&lt;/br&gt;CONNECTION&lt;/center&gt;&lt;/p&gt;
  &lt;/td&gt;
  
  &lt;td&gt;
  &lt;img src="./images/UTILITY.PNG"/&gt;
  &lt;p&gt;&lt;center&gt;UTILITY &amp;&lt;/br&gt;BILL PAYMENT&lt;/center&gt;&lt;/p&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;/table&gt;  
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>table.img_table{
  position: absolute;
  left:160px;
  top: 295px; 
  display: inline;
  font-size:10px;
  font-family:Verdana;
  }
  
  table.img_table td {
      text-align: center;
      padding: 10px
  }
  table.img_table td img {
      display: block;
      margin: 0 auto;
      padding: 10px
      height: 81px;
      width: 80px;
  }  
  </code></pre>
  
  <p>I have created a <a href="http://jsfiddle.net/6ABBx/" rel="nofollow">fiddle</a> out of it</p>