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:

<tablealign="center"><tr><td><tableborder="1"><tr><td>Test 1</td></tr></table></td><td><tableborder="1"><tr><td>test 2</td></tr></table></td><td><tableborder="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;
}

<divclass="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>