并排创建3个小桌子

Question

我正在尝试并排创建3个位于页面中心的小桌子。到目前为止，我有以下代码，但它不起作用。我试图弄清楚如何做到这一点似乎很简单，但它不是，至少对我来说不是。有人可以帮我解决这个问题吗？我附上了一张图片以及我想要制作的图片。

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

Answer 1

您的HTML中有拼写错误。在第二个子表后你有

<td></td>

虽然你可能意味着

</td><td>

所以这个：

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

作品。

Answer 2

正如指出的那样，这个问题是由一个错字造成的。我的想法是删除父表并使用display: inline-table对它们进行排列，然后使用text-align: center对容器进行排列。

远离嵌套表会产生更易读的标记。此外，应删除border属性并在CSS中创建。

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

Answer 3

尝试以下代码

<div class="container" align="center">
<table>
<tr>
<td>column 1</td>
<td>column 2</td>
</td>
</tr>
</table>
<table>
<tr>
<td>column 1</td>
<td>column 2</td>
</td>
</tr>
</table>
<table>
<tr>
<td>column 1</td>
<td>column 2</td>
</td>
</tr>
</table>
</div>

CSS

.container
{
    width:100%;
    height:auto;
}
table
{
    border:1px solid black;
    display:inline;

}