在网页上定位表格

Question

我想创建一个有几个按钮表的网页。我需要能够控制每一张桌子的位置，这样一张桌子就可以在另一张桌子上，在一边，或者在上面，在一边。我知道如何创建按钮表：

<form name="table_buttons">
  <table>
    <tr>
      <td><input type="button" name="1-1">
      </td>
      <td><input type="button" name="1-2">
      </td>
    <tr>
      <td><input type="button" name="1-1">
      </td>
      <td><input type="button" name="2-2">
      </td>
    </td>
  </table>
</form>

然而，我不知道如何以我想要的方式排列多个这样的表。我附上了一张图片，显示了我想要实现的三个安排示例(您可以忽略突出显示的方块)。

​

​

Answer 1

用下面的代码包装每一行

.row {
    display: flex;
    align-items: center;
    justify-content: center;
}

<div class="row">元素接受多个<form>元素并将它们居中对齐。

​

<style>
.row {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>


<div class="row">
    <form name="table_buttons">
        <table>
            <tr>
                <td><input type="button" name="1-1"></td>
                <td><input type="button" name="1-2"></td>
            </tr>
                <tr>
                <td><input type="button" name="1-1"></td>
                <td><input type="button" name="2-2"></td>
            </tr>
        </table>
    </form> &nbsp; &nbsp;

    <form name="table_buttons">
        <table>
            <tr>
                <td><input type="button" name="1-1"></td>
                <td><input type="button" name="1-2"></td>
            </tr>
                <tr>
                <td><input type="button" name="1-1"></td>
                <td><input type="button" name="2-2"></td>
            </tr>
        </table>
    </form> &nbsp; &nbsp;      

    <form name="table_buttons">
        <table>
            <tr>
                <td><input type="button" name="1-1"></td>
                <td><input type="button" name="1-2"></td>
            </tr>
                <tr>
                <td><input type="button" name="1-1"></td>
                <td><input type="button" name="2-2"></td>
            </tr>
        </table>
    </form>      
</div>

<br/>

<div class="row">
    <form name="table_buttons">
        <table>
            <tr>
                <td><input type="button" name="1-1"></td>
                <td><input type="button" name="1-2"></td>
                <td><input type="button" name="1-3"></td>
                <td><input type="button" name="1-4"></td>
            </tr>
            <tr>
                <td><input type="button" name="2-1"></td>
                <td><input type="button" name="2-2"></td>
                <td><input type="button" name="2-3"></td>
                <td><input type="button" name="2-4"></td>
            </tr>
            <tr>
                <td><input type="button" name="3-1"></td>
                <td><input type="button" name="3-2"></td>
                <td><input type="button" name="3-3"></td>
                <td><input type="button" name="3-4"></td>
            </tr>
            <tr>
                <td><input type="button" name="4-1"></td>
                <td><input type="button" name="4-2"></td>
                <td><input type="button" name="4-3"></td>
                <td><input type="button" name="4-4"></td>
            </tr>
        </table>
    </form> &nbsp; &nbsp;   

    <form name="table_buttons">
        <table>
            <tr>
                <td><input type="button" name="1-1"></td>
                <td><input type="button" name="1-2"></td>
                <td><input type="button" name="1-3"></td>
            </tr>
            <tr>
                <td><input type="button" name="2-1"></td>
                <td><input type="button" name="2-2"></td>
                <td><input type="button" name="2-3"></td>
            </tr>
            <tr>
                <td><input type="button" name="3-1"></td>
                <td><input type="button" name="3-2"></td>
                <td><input type="button" name="3-3"></td>
            </tr>
        </table>
    </form>         
</div>

<br/>

<div class="row">
    <form name="table_buttons">
        <table>
            <tr>
                <td><input type="button" name="1-1"></td>
            </tr>
            <tr>
                <td><input type="button" name="2-1"></td>
            </tr>
            <tr>
                <td><input type="button" name="3-1"></td>
            </tr>
        </table>
    </form>     
</div>

​