How to make space between rows, with transparent spacing/border - HTML/CSS

Question

I want to make something similiar to this but with table rows

I did this with <li>, fancy borders, etc and was really easy, but with table rows, I tried pretty much everything, tr, td border collapse, separate, margins, paddings and I can't get it right.

The structure of the table I want to make is something like this:

<table>
<tr><td>abc</td><td>abc</td></tr>
<tr><td>abc</td><td>abc</td></tr>
<tr><td>abc</td><td>abc</td></tr>
</table>

Answer 1

You're looking for border-spacing.

http://www.w3schools.com/cssref/pr_tab_border-spacing.asp

#id1 {
  border-collapse: separate;
  border-spacing: 1em 0.5em;
}