前端之单元格合并

流浪小熊
436 阅读3分钟

我们在日常做表格很少用到像

单元格1 单元格2 单元格3 单元格4 单元格5
单元格6 单元格7 单元格8 单元格9 单元格10
单元格11 单元格12 单元格13 单元格14 单元格15
单元格16 单元格17 单元格18 单元格19 单元格20
单元格21 单元格22 单元格23 单元格24 单元格25

这种整齐的单元格，而多用到

image.png

这种不整齐的单元格，那我们该怎么做呢？ 很简单，把小单元格合并成大单元格就好了

横向合并colspan,将左单元格保留，删掉右单元格

纵向合并rowspan，将上单元格保留，删掉下单元格

例如我要将单元格1和单元格二合并

table border="1" width="600px" heigth="400px">
    <tr>
        <td colspan="2">单元格1</td>

        <td>单元格3</td>
        <td>单元格4</td>
        <td>单元格5</td>
    </tr>
    <tr>
        <td>单元格6</td>
        <td>单元格7</td>
        <td>单元格8</td>
        <td>单元格9</td>
        <td>单元格10</td>
    </tr>
    <tr>
        <td>单元格11</td>
        <td>单元格12</td>
        <td>单元格13</td>
        <td>单元格14</td>
        <td>单元格15</td>
    </tr>
    <tr>
        <td>单元格16</td>
        <td>单元格17</td>
        <td>单元格18</td>
        <td>单元格19</td>
        <td>单元格20</td>
    </tr>
    <tr>
        <td>单元格21</td>
        <td>单元格22</td>
        <td>单元格23</td>
        <td>单元格24</td>
        <td>单元格25</td>
    </tr>
</table>

运行结果：

单元格1单元格3 单元格4 单元格5
单元格6 单元格7 单元格8 单元格9 单元格10
单元格11 单元格12 单元格13 单元格14 单元格15
单元格16 单元格17 单元格18 单元格19 单元格20
单元格21 单元格22 单元格23 单元格24 单元格25

合并单元格20，25：

<table border="1" width="600px" heigth="400px">
    <tr>
        <td colspan="2">单元格1</td>

        <td>单元格3</td>
        <td>单元格4</td>
        <td>单元格5</td>
    </tr>
    <tr>
        <td>单元格6</td>
        <td>单元格7</td>
        <td>单元格8</td>
        <td>单元格9</td>
        <td>单元格10</td>
    </tr>
    <tr>
        <td>单元格11</td>
        <td>单元格12</td>
        <td>单元格13</td>
        <td>单元格14</td>
        <td>单元格15</td>
    </tr>
    <tr>
        <td>单元格16</td>
        <td>单元格17</td>
        <td>单元格18</td>
        <td>单元格19</td>
        <td rowspan="2">单元格20</td>
    </tr>
    <tr>
        <td>单元格21</td>
        <td>单元格22</td>
        <td>单元格23</td>
        <td>单元格24</td>

    </tr>
</table>

示例如下：

单元格1单元格3 单元格4 单元格5
单元格6 单元格7 单元格8 单元格9 单元格10
单元格11 单元格12 单元格13 单元格14 单元格15
单元格16 单元格17 单元格18 单元格19 单元格20
单元格21 单元格22 单元格23 单元格24

那如果我要合并12，13，14，17，18，19又该怎么办呢？

一个单元格是可以同时进行colspan和rowspan两种操作的。我们只需要在所需合并的单元格的最左上的单元格完成两个操作就可以了。

例如：

<table border="1" width="600px" heigth="400px">
    <tr>
        <td colspan="2">单元格1</td>

        <td>单元格3</td>
        <td>单元格4</td>
        <td>单元格5</td>
    </tr>
    <tr>
        <td>单元格6</td>
        <td>单元格7</td>
        <td>单元格8</td>
        <td>单元格9</td>
        <td>单元格10</td>
    </tr>
    <tr>
        <td>单元格11</td>
        <td colspan="3" rowspan="2">单元格12</td>

        <td>单元格15</td>
    </tr>
    <tr>
        <td>单元格16</td>


        <td rowspan="2">单元格20</td>
    </tr>
    <tr>
        <td>单元格21</td>
        <td>单元格22</td>
        <td>单元格23</td>
        <td>单元格24</td>

    </tr>
</table>

运行结果：

单元格1单元格3 单元格4 单元格5
单元格6 单元格7 单元格8 单元格9 单元格10
单元格11 单元格12单元格15
单元格16单元格20
单元格21 单元格22 单元格23 单元格24
注：在完成colspan和rowspan操作后要把被合并的单元格删除
avatar
文章
阅读
粉丝