收藏
天蓬老师批改状态：合格
老师批语：表格做得相当专业
在html表格合并中，如果需要用到多列合并成一列，可以使用表格自带属性“colspan”，该属性表示自设定属性的列开始向右合并多少列，比如需要合并3列，那么属性可以这样设置colspan="3"，需要注意的是不是写完属性就完事了，还需要把填写了属性之后的2列代码注释掉或者删除掉，这个稍后看下面示例代码；
在html中行的合并与列的合并其实都是类似的，唯一有区别的就是所使用的属性不同，行合并我们使用的是“rowspan”属性，用法也是跟上面一样，比如我需要向下合并4行表格，那么属性可以这样设置rowspan="4"，要注意的事项也跟列合并一样，需要注释或删除合并到的表格代码部分。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>表格行与列的合并</title></head><body><table width="1000" align="center" border="1" cellspacing="0" cellpadding="5" height="200"><!-- 表格标题 --><caption style="font-size: 1.5rem; margin-bottom: 10px">雄讯网络九月份工资表</caption><!-- 表格头部 --><thead><tr><!-- 行合并 向下合并3行--><th rowspan="3">编号</th><!-- 行合并 向下合并3行--><th rowspan="3">姓名</th><!-- 行合并 向下合并3行--><th rowspan="3">基本工资</th><!-- 列合并 向右合并4列--><th colspan="4">加班工资</th><!-- 合并的列要注释或者删除，不然表格会错位变形，一下注释掉代码均为合并后多余的代码 --><!-- <th>加班工资</th><th>加班工资</th><th>加班工资</th> --><th rowspan="3">奖金</th><th colspan="4">扣除金额</th><!-- <th>扣除金额</th><th>扣除金额</th><th>扣除金额</th> --><th rowspan="3">实发工资</th><th rowspan="3">员工签字</th></tr><tr><!-- <th>编号</th> --><!-- <th>姓名</th> --><!-- <th>基本工资</th> --><th colspan="2">平时工资</th><!-- <th>平时工资</th> --><th colspan="2">周末加班</th><!-- <th>周末加班</th> --><!-- <th>奖金</th> --><th rowspan="2">养老保险</th><th rowspan="2">医疗保险</th><th rowspan="2">失业保险</th><th rowspan="2">其他</th><!-- <th>实发工资</th><th>员工签名</th> --></tr><tr><!-- <th>编号</th> --><!-- <th>姓名</th> --><!-- <th>基本工资</th> --><th>时间</th><th>工资</th><th>时间</th><th>工资</th><!-- <th>奖金</th> --><!-- <th>养老保险</th> --><!-- <th>医疗保险</th> --><!-- <th>失业保险</th> --><!-- <th>其他</th> --><!-- <th>实发工资</th><th>员工签名</th> --></tr></thead><!-- 表格主体内容 --><tbody><tr><!-- 整行14列一起合并 --><td colspan="14" align="center">由于是演示，我数据全部做成一样了</td></tr><tr><td>1</td><td>雄雄</td><td>1800</td><td>10</td><td>200</td><td>8</td><td>240</td><td>600</td><td>320</td><td>120</td><td>60</td><td>0</td><td>3310</td><td></td></tr><tr><td>2</td><td>雄雄</td><td>1800</td><td>10</td><td>200</td><td>8</td><td>240</td><td>600</td><td>320</td><td>120</td><td>60</td><td>0</td><td>3310</td><td></td></tr><tr><td>3</td><td>雄雄</td><td>1800</td><td>10</td><td>200</td><td>8</td><td>240</td><td>600</td><td>320</td><td>120</td><td>60</td><td>0</td><td>3310</td><td></td></tr><tr><td>4</td><td>雄雄</td><td>1800</td><td>10</td><td>200</td><td>8</td><td>240</td><td>600</td><td>320</td><td>120</td><td>60</td><td>0</td><td>3310</td><td></td></tr><tr><td>5</td><td>雄雄</td><td>1800</td><td>10</td><td>200</td><td>8</td><td>240</td><td>600</td><td>320</td><td>120</td><td>60</td><td>0</td><td>3310</td><td></td></tr></tbody></table></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
