My latest attempt at creating a simple HTML table involved filling it with placeholder images and spacing them out using a background color. However, the end result was not what I expected:
https://i.sstatic.net/kyRil.png
Upon closer examination, you'll notice that the rightmost image appears smaller than the others - quite odd indeed.
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>I suspect that the issue may be related to how I spaced the table with margins and empty columns. Any suggestions on how to fix this without compromising the neat visual design?
Note: The website is mobile-responsive and automatically scales images, so setting fixed dimensions will not be effective for me.