Putting a space between two different tables in HTML

Issue

I want about 30 tables on a page in a grid like format but I am having trouble putting any spacing between all of them. This is what I have right now:

<table>
 <tr>
  <th><span class="prizestitle">Table</span></th>
 </tr>
 <tr>
   <td><span class="prizesinfo">Info</span></td>
  </tr>
 <tr>
   <td><span class="prizesdesc">Description</span></td>
  </tr>
</table>
<table>
  <tr>
    <th><span class="prizestitle">Table</span></th>
  </tr>
  <tr>
    <td><span class="prizesinfo">Info</span></td>
  </tr>
  <tr>
    <td><span class="prizesdesc">Description</span></td>
  </tr>
</table>
<table>
  <tr>
    <th><span class="prizestitle">Table</span></th>
  </tr>
  <tr>
    <td><span class="prizesinfo">Info</span></td>
  </tr>
  <tr>
    <td><span class="prizesdesc">Description</span></td>
  </tr>
</table>

table {
  border-collapse: collapse;
  border: 1px solid gray;
  width: 50%;
  float: left;
}

th {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  background-color: #6666ff;
}

td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.prizestitle {
  font-size: 30px;
}

.prizesinfo {
  font-size: 25px;
}

.prizesdesc {
  font-size: 18px;
}

Here is the jsfiddle: https://jsfiddle.net/ohLa00m7/1/

Something similar to how to boxes are layed out here (http://www.awwwards.com/blog/) is what I am looking for.

Thanks for any help!

Solution

Using <div> instead of tables would work better.

My version of this code:

HTML

<div class="shell">
    <div class="prizestitle">Table</div>
    <div class="prizesinfo td">Info</div>
    <div class="prizesdesc td">Description</div>
</div>

CSS

.td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}

.prizestitle {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
background-color: #6666ff;
font-size: 30px;
font-weight: 200;

}

.prizesinfo {
    font-size: 25px;

}

.prizesdesc {
    font-size: 18px;

}

.shell {
    border: 1px solid gray;
    border-collapse: collapse;
    width: calc(50% - 40px);
    margin: 10px;
    display: inline-block;
    float: left;
}  

Answered By - Sakaratte