Separation of tables in html

Navigation
0

I've created 4 tables, but I want to separate them and I can not, they're all stuck. How can I resolve this? I'll leave the code. When running they do not appear side by side because it is a small space but you can see the first and second table. 

.table, th, td {
  border: solid #000000;
  border-collapse: collapse;
  border-width: 3px;
}

.th, td {
  border-width: 3px;
  font-family: Open Sans;
}

.right {
  float: right;
}

.left {
  text-align: left;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <tr>
    <table align="left" class="table" style="width:10%">
      <tr>
        <th align="center" bgcolor="#def2d9" colspan="3">1 STARTER</th>
      </tr>
      <tr>
        <th></th>
        <th>Users</th>
        <th></th>
      </tr>
      <tr>
        <td>M00</td>
        <td align="center">1</td>
        <td>Base Package</td>
      </tr>
      <tr>
        <td>SP40</td>
        <td align="center">NA</td>
        <td>Training</td>
      </tr>
      <tr>
        <td align="left" colspan="3">
          <p class="left">
            <b>PRICE:</b>
            <span class"right" align="right">9 900,00€<br>+<br>131,67€<br>Monthly Subscription</span>
        </td>
      </tr>
    </table>
  </tr>
  <tr>
    <table align="left" class="table" style="width:15%" "float:left">
      <tr>
        <th align="center" bgcolor="#ffe5d5" colspan="3">2 PRODUCTION BASICS</th>
      </tr>
      <tr>
        <th></th>
        <th>Users</th> 
        <th></th>
      </tr>
      <tr>
        <td>M00</td>
        <td align="center">1</td>
        <td>Base Package</td>
      </tr>
      <tr>
        <td>M12a</td>
        <td align="center">up to 3</td>
        <td>Technical Drawings</td>
      </tr>
      <tr>
        <td>M13</td>
        <td align="center">up to 3</td>
        <td>BOM</td>
      </tr>
      <tr>
        <td>V-PRO</td>
        <td align="center">1</td>
        <td>Cutting Optimization Drawings</td>
      </tr>
      <tr>
        <td>SP60</td>
        <td align="center">NA</td>
        <td>Training</td>
      </tr>
      <tr>
        <td align="left" colspan="3">
          <p class="left">
            <b>PRICE:</b>
            <span class="right" align="right">17 650,00€<br>+<br>244,17€<br>Monthly Subscription</span>
        </td>
      </tr>
    </table>
  </tr>
  <tr>
    <table align="left" class="table" style="width:15%" "float:left">
      <tr>
        <th align="center" bgcolor="#fff4ca" colspan="4">3 PRODUCTION MACHINES</th>
      </tr>
      <tr>
        <th></th>
        <th>Users</th>
        <th>Machines</th>
        <th></th>
      </tr>
      <tr>
        <td>M00</td>
        <td align="center">1</td>
        <td></td>
        <td>Base Package</td>
      </tr>
      <tr>
        <td>M12a</td>
        <td align="center">up to 3</td>
        <td></td>
        <td>Technical Drawings</td>
      </tr>
      <tr>
        <td>M12b</td>
        <td></td>
        <td align="center">1</td>
        <td>CNC Machine's Comunication</td>
      </tr>
      <tr>
        <td>M13</td>
        <td align="center">up to 3</td>
        <td></td>
        <td>BOM</td>
      </tr>
      <tr>
        <td>V-PRO PP</td>
        <td></td>
        <td align="center">1</td>
        <td>Cutting Optimization Panel Saw's Comunication</td>
      </tr>
      <tr>
        <td>SP80</td>
        <td align="center">NA</td>
        <td></td>
        <td>Training</td>
      </tr>
      <tr>
        <td align="left" colspan="4">
          <p class="left">
            <b>PRICE:</b>
            <span class="right" align="right">21 620,00€<br>+<br>293,67€<br>Monthly Subscription</span>
        </td>
      </tr>
    </table>
  </tr>
  <tr>
    <table align="left" class="table" style="width:15%" "float:left">
      <tr>
        <th align="center" bgcolor="#dcebf8" colspan="5"> 4 PRODUCTION COMPLETE</th>
      </tr>
      <tr>
        <th></th>
        <th>Users</th>
        <th>Machines</th>
        <th>SF Centers</th>
        <th></th>
      </tr>
      <tr>
        <td>M00</td>
        <td align="center">1</td>
        <td></td>
        <td></td>
        <td>Base Package</td>
      </tr>
      <tr>
        <td>M03</td>
        <td align="center">up to 3</td>
        <td></td>
        <td></td>
        <td>Auto Item Generation</td>
      </tr>
      <tr>
        <td>M10</td>
        <td align="center">up to 3</td>
        <td></td>
        <td></td>
        <td>Package Optimization</td>
      </tr>
      <tr>
        <td>M11</td>
        <td align="center">up to 3</td>
        <td></td>
        <td></td>
        <td>Group different order's components</td>
      </tr>
      <tr>
        <td>M12a</td>
        <td align="center">up to 3</td>
        <td></td>
        <td></td>
        <td>Technical Drawings</td>
      </tr>
      <tr>
        <td>M12b</td>
        <td></td>
        <td align="center">1</td>
        <td></td>
        <td>CNC Machine's Comunication</td>
      </tr>
      <tr>
        <td>M13</td>
        <td align="center">up to 3</td>
        <td></td>
        <td></td>
        <td>BOM</td>
      </tr>
      <tr>
        <td>V-PRO PP</td>
        <td></td>
        <td align="center">1</td>
        <td></td>
        <td>Cutting Optimization Panel Saw's Comunication</td>
      </tr>
      <tr>
        <td>Psmart</td>
        <td align="center">1</td>
        <td></td>
        <td align="center">4</td>
        <td>Shop Floor Control</td>
      </tr>
      <tr>
        <td>SP120</td>
        <td align="center">NA</td>
        <td></td>
        <td></td>
        <td>Training</td>
      </tr>
      <tr>
        <td align="left" colspan="5">
          <p class="left">
            <b>PRICE:</b>
            <span class="right" align="right">35 090,00€<br>+<br>583,79€<br>Monthly Subscription</span>
        </td>
      </tr>
    </table>
  </tr>
</body>
</html>
    
asked by anonymous 24.03.2017 / 12:49

2 answers

0

I put a small spacing to the right of them just by adding the following line at the top of your CSS: 

table { margin-right: 10px; }

I've put an example in JSFiddle for you to view and edit as you like:

link

    
24.03.2017 / 13:07
0

Use the CSS margin property 

.table{

        margin:top, right, bottom, and left;

 }
  

Set the values you want

    
24.03.2017 / 12:54
Difficulties with Logic floating banner that covers the whole page