How do I remove separation between rows in a HTML table?

I have a html table with 3 开发者_JAVA百科rows and 1 column. In the top and button row I have images and in the middle row I have div.

Between my rows I see a separation (I see background of my page). I tried to set all padding and margins to zero (for tables, div and images) and I still have this separation. Can anybody, please, help me to solve this problem.

Try using 'border-collapse':

table {
  border-collapse: collapse;
}

Set the cellspacing=0 in the <table> tag as well as cellpadding=0.

Use this in img tag :

display: block;

Gonzohunter nailed this, alright, but you may find it easier to just set the style on the table, assuming you are in a recent HTML version.

I used

<table style='border-collapse: collapse;'>
    ... 
</table>

This worked perfectly.

It seems that it's your H2 that's causing it. To fix it, set the top margin of it to zero:

<h2 style="margin-top: 0;"><span class="text">Welcome to the Colored Trails Game Page!</span></h2>

You need to eliminate spacing from the table cells themselves.

In CSS:

<style type="text/css">
  td {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
    padding: 0;
  }
</style>

Or in HTML 4.01/XHTML 1.0 DTD (Strict or Transitional):

<table cellspacing="0" cellpadding="0">
  [...]
</table>