Removing unwanted padding/margin/border in table of images HTML

I am trying to create a table of images -- with all cells width and height the same size.

For some reason there is some odd margin / padding added in final result, even though I've set all padding / margin / border to 0.

The dotted red around the images / gold border of table -- is just to show what there is stuff outside of the border that i am trying to get rid of.

HTML:
<table align="center" class="gridStyle">
  <tr><td><img src="~/Images/Heart.png" /></td><td><img src="~/Images/Heart.png" /></td></tr>
  <tr><td><img src="~/Images/Heart.png" /></td><td><img src="~/Images/Heart.png" /></td></tr>
</table>


CSS:
.gridStyle
{
  border: 2px solid gold;
  max-width: 50%;
  margin: 0;
  padding: 0;
}

  .gridStyle th, .gameDisplay td, .gameDisplay tr
  {
    border: 0;
    margin: 0;
    padding: 0;
    border-collapse: collapse;
  }

  .gridStyle img
  {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 1px dotted red;
  }

Try to remove cellspacing & cellpadding:

<table align="center" class="gridStyle" cellpadding="0" cellspacing="0">...</table>