javascript - 在网页上定位表格

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>

但是我不知道如何以我想要的方式排列多个这些表。我附上了一张图片，展示了我想要实现的三个排列示例（您可以忽略突出显示的方块）。

标签： javascripthtmlcsshtml-table

Answer 1

如何包装每一行

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

<div class="row">element 需要几个<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>