Whitespace/Margin between <table> and <h1> of a <form> element

Question

There is a huge amount of whitespace between <table> and <h1> both of which are in a form element. As soon as I remove the <table> element, this whitespace goes. I am using <table> element to align elements to a form. Can someone explain why this is happening?

 <form> <h2>Form Heading goes here</h2> <table> <tr> <td>First Name</td> <td><input type="text" name="f_name"></td> </tr> <tr> <td>Last Name</td> <td><input type="text" name="l_name"></td> </tr> </table> </form> 

Answer 1

By default, the h2 tag adds margin under it. The following CSS will remove that space.

CSS

h2 {
  margin-bottom: 0;
}

Answer 2

you have to remove the default margin of <h2> tag.

 h2{ margin: 0; } 

 <form> <h2>Form Heading goes here</h2> <table> <tr> <td>First Name</td> <td><input type="text" name="f_name"></td> </tr> <tr> <td>Last Name</td> <td><input type="text" name="l_name"></td> </tr> </table> </form>