Putting a space between two different tables in HTML

Question

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!

Answer 1

You can use margin and calc function in css :

table {
  border-collapse: collapse;
  border: 1px solid gray;
  width: calc(50% - 10px);
  float: left;
  margin: 5px;
}

table {
  border-collapse: collapse;
  border: 1px solid gray;
  width: calc(50% - 10px);
  float: left;
  margin: 5px;
}

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;
}

<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>
  <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>