How to have equal distance between the columns in a table - html

Question

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.
HTML
<table class="img_table">
<tr>
<td>
<img src="./images/FACILITIES.PNG"/>
<p><center>FACILITIES</br>MANAGEMENT</center></p>
</td>
<td>
<img src="./images/RESALE.PNG"/>
<p><center>RESALE</br>& RENTALS</center></p>
</td>
<td>
<img src="./images/AIR_CONDITIONER.PNG"/>
<p><center>AIR CONDITIONER</br>SERVICES</center></p>
</td>
<td>
<img src="./images/DEEP_CLEANING.PNG"/>
<p><center>DEEP CLEANING</br>& JANITORSERVICES</center></p>
</td>
</tr>
<tr>
<td>
<img src="./images/INTERIOR.PNG"/>
<p><center>INTERIOR</br>WORK</center></p>
</td>
<td>
<img src="./images/PAINTING.PNG"/>
<p><center>PAINTING</br>WORK</center></p>
</td>
<td>
<img src="./images/LANDSCAPING.PNG"/>
<p><center>LANDSCAPING</br>WORK</center></p>
</td>
<td>
<img src="./images/PEST_CONTROL.PNG"/>
<p><center>PEST CONTROL</br>WORK</center></p>
</td>
</tr>
<tr>
<td>
<img src="./images/SECURITY.PNG"/>
<p><center>SECURITY</br>SERVICES</center></p>
</td>
<td>
<img src="./images/CONCIERGE.PNG"/>
<p><center>CONCEIRGE</br>SERVICES</center></p>
</td>
<td>
<img src="./images/MOBILE_LANDLINE.PNG"/>
<p><center>MOBILE/LANDLINE</br>CONNECTION</center></p>
</td>
<td>
<img src="./images/UTILITY.PNG"/>
<p><center>UTILITY &</br>BILL PAYMENT</center></p>
</td>
</tr>
</table>
CSS
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;
}
I have created a fiddle out of it

Answer 1

Tables are designed to resize to fit the content, so having longer words or wider images will mean larger columns (I think), this can be fixed by inputting "white space" into the smaller columns or removing text from the larger ones. I am sure there is another way to do it, but it would have to involve resizing the text in some way. Hope this helps :)

Answer 2

Well this all is happening because of Your long names written on your table if you write only one letter each then you will get your coding is right just the problem is of the length of the words.
To prevent this you can do this :
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: 100px;
}
By simply increasing the width: 100px and it will obviously give you equal distance between all your images.
FIDDLE

Answer 3

You can add following CSS.
table.img_table td {
vertical-align: top;
word-break: break-all;
}

Answer 4

you paragraph tag is not sized while image has size. so you must add
tr{
vertical-align:top;
}
p{
width:80px;
}
and remove all those br and center tags. i rather like to use divs instead of table
http://jsfiddle.net/6ABBx/4/