Why does my HTML table shrink images from left to right? - html

Question

I made a simple HTML table, filled it with placeholder images, and spaced them with a background color. This is what I get:
Compare the rightmost image to the left... then notice how each image gets smaller. Very odd.
td {
padding: 5px;
background-color: #C6C6C6;
}
<table>
<tr>
<td>
<img src="http://www.examplesite.com/pholder.png" />
</td>
<td style="background-color: #FFFFFF;"></td>
<td>
<img src="http://www.examplesite.com/pholder.png" />
</td>
<td style="background-color: #FFFFFF;"></td>
<td>
<img src="http://www.examplesite.com/pholder.png" />
</td>
<td style="background-color: #FFFFFF;"></td>
<td>
<img src="http://www.examplesite.com/pholder.png" />
</td>
<td style="background-color: #FFFFFF;"></td>
<td>
<img src="http://www.examplesite.com/pholder.png" />
</td>
</tr>
</table>
As you can see, I space the table with a margin and empty columns. I think that may be the cause, but I'm not sure why or how to fix it while keeping the neat visual appearance. How do I fix this?
Note: The site is also mobile-responsive and has to scale images automatically, so setting a fixed width/height will not work for me.

Answer 1

I do not have a good answer to your exact question but I can tell you using a table for layout is a very bad practice especially if you want to make the site responsive. Tables are for tabular data display.
Using divs and css with media queries will assure that your layout is consistent. Sure it will take a bit more but there is a lot of good material out there on how to do it.
====EDIT ====
To fix the issue at hand as well you can add a width to the td. It will keep them the same size if you know how many elements will be displayed. In the current table you have 5 so
<tr>
<td width="20%">image</td>
<td width="20%">image</td>
<td width="20%">image</td>
<td width="20%">image</td>
<td width="20%">image</td>
</tr>
Tables try and space things depending on the content. It leads to the end cells getting squished.