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

Question

I have a html table with 3 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.

Answer 1

Set the cellspacing=0 in the table tag aswell as cellpadding = 0

Answer 2

Try using 'border-collapse':

table {
  border-collapse: collapse;
}

Answer 3

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>

Answer 4

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>