在初学前端时,对于表格中的合并行,合并列不是很清楚,下面是自己的理解
合并行: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>
下面是运行的结果