table-⼀列细分为多列（合并单元格）
这个是⼀个很常见的⼀个表格展⽰需求，其中最要的就两个属性 rowspan 和 colspan 。他们分别就是合并⾏与合并列。
要做的效果是如图下⾯这个，就是合并了单元格。这个说法类似于excel表格⾥的表格处理说法。
我们实现它的代码就是如下代码块。其中学号，姓名，班级都在th中添加了rowspan=“2”这个值，含义就是这三个格⼦td占两⾏；的添加了colspan="2"则是表⽰这个单元格要占两⾏的位置。再来⼀个<tr></tr>标签放区号和号码，默认的时候rowspan是1 ，所以和区号和号码就聚在⼀起了，占领了两⾏，构成了上图的样⼦。
<table>
<thead>
<tr>
<th rowspan="2">学号</th>
<th rowspan="2">姓名</th>
<th rowspan="2">班级</th>
<th colspan="2"></th>
</tr>
<tr>
<th>区号</th>
<th>号码</th>
</tr>
</thead>
html colspan属性</table>
  现在明⽩了rowspan与colspan的含义之后就可以随意蹂躏这个table了，就算你想加多个列在某⼀列下⾯也可以了，只需要改变colspan 的值，让他与需要细分的列值能对应起来即可。对了这⾥要叨叨⼀句，赋值的问题。我没看图可以看出他其实真正的只有5列的值，所以只需要在tbody中的每个<tr></tr>
中放⼊5个<td></td>就可以了。
下⾯想要扩展写⼀下类似于下⾯的数据展⽰，依旧是这两个属性。相信可以⼀眼看懂。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。