如何将表格放在表格中？

Question

下面的代码适用于我需要的东西（三个水平按钮），除了它不居中。它位于屏幕的左侧。我做了一些研究并且无法解决它，并尝试使用“浮动”和“显示：内联”的无表格设计，并且无法使其居中。请帮忙！

<table>
<td>
<tr>
<form method="get" action="index.php"><button type="submit">Home</button></form>
<form method="get" action="signup"><button type="submit">Create Account</button></form>
<form method="get" action="login"><button type="submit">Login to Account</button></form>
</tr>
</td>
</table>

Answer 1

正如其他人提到的<td>应该在<tr>内。默认情况下，<form>显示为块元素。将其更改为inline-block。

table {
  border: 1px solid red;
  width: 100%;
}
td {
  border: 1px solid green;
  text-align: center;
}
form {
  display: inline-block;
}

<table>
  <tr>
    <td>
      <form method="get" action="index.php">
        <button type="submit">Home</button>
      </form>
      <form method="get" action="signup">
        <button type="submit">Create Account</button>
      </form>
      <form method="get" action="login">
        <button type="submit">Login to Account</button>
      </form>
    </td>
  </tr>
</table>

Answer 2

<tr>（行）应该在外面

<table>
    <tr>
        <td>
            <form method="get" action="index.php"><button type="submit">Home</button></form>
        </td>
        <td>
            <form method="get" action="signup"><button type="submit">Create Account</button></form>
        </td>
        <td>
            <form method="get" action="login"><button type="submit">Login to Account</button></form>
        </td>
    </tr>
</table>

jsFiddle Demo

Answer 3

在html中反转tr和td。

<table>
<tr>
<td>
<form method="get" action="index.php"><button type="submit">Home</button></form>
</td>
<td>
<form method="get" action="signup"><button type="submit">Create Account</button></form>
</td>
<td>
<form method="get" action="login"><button type="submit">Login to Account</button></form>
</td>
</tr>
</table>

并尝试将此添加到CSS

 td {
     text-align: center;
 }

别忘了设置桌子的宽度！ （所有窗口100％）