前端HTML CSS合并行、合并列

在初学前端时，对于表格中的合并行，合并列不是很清楚，下面是自己的理解
合并行：rowspan
合并列：colspan
就下图所示，这个表有3行6列，
我们可以分析图上的合并情况
接下来就是代码了
在html文档的body标签中加入以下代码

<table border="1">
    <!--    thead  代表表头-->
    <thead></thead>
    <!--   tbody 可以理解为表身，也即是表的主题内容-->
    <tbody>
    <!--   tr ：行    td:列，在没有合并时就应该有三个tr标签，3*6个td标签-->
<!--    第一行-->
    <tr>
        <td colspan="6">收入支出表</td>
<!--        由于第一列就把后面的几列合并了，所以应该删除多余列-->
<!--        <td></td>-->
<!--        <td></td>-->
<!--        <td></td>-->
<!--        <td></td>-->
<!--        <td></td>-->
    </tr>
<!--    第二行-->
    <tr>
        <td rowspan="2">项目负责人</td>
        <td>张伟</td>
        <td rowspan="2">收入</td>
        <td>123</td>
        <td rowspan="2">共计</td>
        <td rowspan="2">345</td>
    </tr>
<!--第三行-->
    <tr>
<!--        与第二行的第一列合并，所以删除第三行第一列-->
<!--        <td></td>-->
        <td>李华</td>
        <!--        与第二行的第三列合并，所以删除第三行第三列-->
<!--        <td></td>-->
        <td>231</td>
        <!--        与第二行的第五、六列合并，所以删除第三行第五、六列-->
<!--        <td></td>-->
<!--        <td></td>-->
    </tr>


    <tbody>
</table>

删除多余的后，简洁版如下：

<table border="1">
    <thead></thead>
    <tbody>
<!--    第一行-->
    <tr>
        <td colspan="6">收入支出表</td>
    </tr>
<!--    第二行-->
    <tr>
        <td rowspan="2">项目负责人</td>
        <td>张伟</td>
        <td rowspan="2">收入</td>
        <td>123</td>
        <td rowspan="2">共计</td>
        <td rowspan="2">345</td>
    </tr>
<!--第三行-->
    <tr>
        <td>李华</td>
        <td>231</td>
    </tr>
    <tbody>
</table>

下面是运行的结果