Creating 3 Small Tables Side By Side Centered

I am trying to create 3 small tables side by side that are centered in the page. I have the following code so far but it doesn't work. I'm breaking my head trying to figure out how

Solution 1:

You have typo in your HTML. After the second child table you have

<td></td>

While you probably meant

</td><td>

So this:

<table align="center"><tr><td>
<table border="1">
    <tr>
    <td>Test 1</td>
    </tr>
</table>

</td><td>
<table border="1">
    <tr>
    <td>test 2</td>
    </tr>
</table>
</td><td>
<table border="1">
    <tr>
    <td>test 3</td>
    </tr>
</table>
</td></tr></table>

works.

Solution 2:

The problem is caused by a typo, as pointed out. My idea would be to remove the parent table and use display: inline-table to line them up and then text-align: center on a container to center them.

Moving away from nested tables results in much more readable markup. Also, the border attribute should be removed and created in CSS instead.

.wrap {
  text-align: center;
}

table {
  display: inline-table;
  border-collapse: collapse;
}

td { 
  border: solid 1px #CCC;
  padding: 10px;
}

<div class="wrap">
  <table>
    <tr>
      <td>Test 1</td>
    </tr>
  </table>


  <table>
    <tr>
      <td>Test 2</td>
    </tr>
  </table>

  <table>
    <tr>
      <td>Test 3</td>
    </tr>
  </table>
</div>