HTML Element Style How to - Put two tables side by side with equal spacing

Question

We would like to know how to put two tables side by side with equal spacing.

Answer


<!DOCTYPE html>
<html>
<head>
<style>
body {<!--from w ww.j a v  a 2s . c o m-->
  width: 90%;
  margin: 0 auto;
}

table:first-child {
  background-color: blue;
  color: white;
  margin-right: 1%;
}

table:nth-child(2n) {
  background-color: black;
  color: white;
}

table {
  width: 49%;
  float: left;
}
</style>
</head>
<body>
  <table>
    <tr>
      <td>Hello</td>
    </tr>
  </table>
  <table>
    <tr>
      <td>World</td>
    </tr>
  </table>
</body>
</html>

The code above is rendered as follows: