title: Extra white space on table cells
body: <p><img src="https://i.stack.imgur.com/pmQtA.png" alt="enter image description here"></p>
  
  <p>I am creating a table with 5 images across, one in each cell.
  I want it to span 920px, with 10px gap between each cell.
  Which equals 176 for each cell, so I made my images 176px wide.</p>
  
  <p>This is my html and CSS:</p>
  
  <pre><code>    &lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;a class="fancybox-effects-c" rel="group" href="images/newhomes_02.jpeg" title="New Home Number Two"&gt;&lt;img src="images/thumb_newhomes_01.gif" class="fade" alt="" /&gt;&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt;&lt;a class="fancybox-effects-c" rel="group" href="images/newhomes_02.jpeg" title="New Home Number Two"&gt;&lt;img src="images/thumb_newhomes_01.gif" class="fade" alt="" /&gt;&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt;&lt;a class="fancybox-effects-c" rel="group" href="images/newhomes_01.jpeg" title="New Home Number Three"&gt;&lt;img src="images/thumb_newhomes_01.gif" class="fade" alt="" /&gt;&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt;&lt;a class="fancybox-effects-c" rel="group" href="images/newhomes_02.jpeg" title="New Home Number Four"&gt;&lt;img src="images/thumb_newhomes_01.gif" class="fade" alt="" /&gt;&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt;&lt;a class="fancybox-effects-c" rel="group" href="images/newhomes_01.jpeg" title="New Home Number Five"&gt;&lt;img src="images/thumb_newhomes_01.gif" class="fade" alt="" /&gt;&lt;/a&gt;&lt;/td&gt;
  &lt;/table&gt;
  
  
  
  table {
      width:100%;
      cell-padding:"0";
      cell-spacing:"0";
      margin:0;
      border:none;
  }
  
  td {
      width:176px;
  }
  </code></pre>
  
  <p>You can see in my attached image. that there is this white space on right side inside each cell.
  I thought cell-padding and cell-spacing would fix it, but it didn't. Even doing td a set witdth of 176px didn't work. What am I doing wrong? Is there a better method?</p>