CSS: Gaps between td, div and table

The little gap between td(s) and the gap between the border of a table to a border of a div is just annoying. Here’s the before and after.
Before:
<table border="0">
  <tr>
    <td style="border: solid 3px gray;border-bottom:none">
      1st row
   </td>
  </tr>
  <tr>
    <td style="border:solid 3px red; border-top:none">
      2nd row
    </td>
  </tr>
</table>

1st row

2nd row

div1

After: if we modify margin, padding, (cellspacing, cellpadding for tables only) properties of table and div to 0, it’ll look fine then:

<table border="0" cellspacing="0">
  <tr>
    <td style="border: solid 3px gray;border-bottom:none">
     <div>
        1st row
      </div>
    </td>
  </tr>
  <tr>
    <td style="border:solid 3px red; border-top:none">
      2nd row
   </td>
  </tr>
</table>
<div style="border:solid 3px yellow;margin:0;">div 2</div>

1st row

2nd row

div2