Separation of tables in html

Asked

Viewed 112 times

0

I created 4 tables, but I want to separate them and I can’t, they’re all footprints. How can I fix 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 the 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>

html table

  • Let me get this straight, you want me to show up next to each other with a bigger space?

  • @Arturtrapp yes, they have to be side by side, but with spacing between them, not glued as they are. Can help me?

2 answers

0

Use the CSS margin property

.table{

        margin:top, right, bottom, and left;

 }

Set the values you want

0


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

table { margin-right: 10px; }

I put an example in Jsfiddle for you to see and edit as you want:

https://jsfiddle.net/p0jp370L/4/

  • just put in css?

  • @Melissasousa yes, just do that

  • in your exeplo in jsfiddle really is as I want, but I applied and it did not result

  • @Melissasousa try putting the margin-right: 10px; inside . table, the way I updated in the example

  • it was like I did, I copied and pasted exactly like you have

  • @Melissasousa This is strange. You saved and pressed ctrl+f5? And take a look at the fiddle again, I’ve changed one thing

  • yes I did it all, I’ll see it again

  • still nothing :/ don’t know what else to do

  • Let’s go continue this discussion in chat.

  • how do I go to chat? I’m new around here

  • Just click on the link there

Show 6 more comments

Browser other questions tagged html table

You are not signed in. Login or sign up in order to post.