html - Creating 3 small tables side by side centered -

html - Creating 3 small tables side by side centered -

i trying create 3 little tables side side centered in page. have next code far doesn't work. i'm breaking head trying figure out how , seems simple, not, @ to the lowest degree me not. can please help me out this. have attached image trying create.

<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>

the problem caused typo, pointed out. thought remove parent table , utilize display: inline-table line them , text-align: center on container center them.

moving away nested tables results in much more readable markup. also, border attribute should removed , created in css instead.

class="snippet-code-css lang-css prettyprint-override">.wrap { text-align: center; } table { display: inline-table; border-collapse: collapse; } td { border: solid 1px #ccc; padding: 10px; } class="snippet-code-html lang-html prettyprint-override"><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>

html table