(HTML) Margin bottom for tables?

Question

I'm making an HTML email and the program that loads these do not accept separate CSS file, so everything has to be inline. For some reason margins for tables are not working. All I need is a gap between the bottom of a table and the next one.

What I have so far:

<table width="600" margin-bottom="50" cellpadding=8 cellspacing=0 border=0>
  //contents of table
</table>

<table width="600" cellpadding="0" cellspacing="0" border="0">
  //contents of next table
</table>

There is no gap created at all.

This works:

<table width="600" cellpadding=8 cellspacing=0 border=0>
  //contents of table
</table>

<br>

<table width="600" cellpadding="0" cellspacing="0" border="0">
  //contents of next table
</table>

I also tried padding-bottom, doesn't do anything either.

Is using <br> the only way then? Seems kind of awkward.

Answer 1

The way you were using margin was incorrect. Margin has to be inside of a style attribute. The other attributes are table specific attributes that usually can only be used directly on tables. You can use margin, but if I were you, I'd use the <br/> tag because that will always be rendered the same way by all devices. Margin can be a bit iffy with some email systems like Outlook.

<table width="600" style="margin-bottom:50px;" cellpadding=8 cellspacing=0 border=0>
  //contents of table
</table>

<table width="600" cellpadding="0" cellspacing="0" border="0">
  //contents of next table
</table>