合并单元格:
1.先实现特殊表格对应的普通表格的基本结构。
2.判定当前单元格是跨行还是跨列，给对应的单元格属性，属性值就是占据的单元格数量
(从上到下，从左到右的顺序，合并单元格，跨列用colspan,跨行用rowspan,左上)
3.保存看错误效果。
4.删除效果中对应行多的单元格（从行的最后面一个单元格往前删除)
案例一 合并单元格
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><table border="1" cellspacing="0"><tr><td colspan="2">aaaaa</td><td >aaaaa</td><td>aaaaa</td><td>aaaaa</td></tr><tr><td>aaaaa</td><td>aaaaa</td><td rowspan="4">aaaaa</td><td>aaaaa</td><td rowspan="2">aaaaa</td></tr><tr><td>aaaaa</td><td>aaaaa</td><td>aaaaa</td></tr><tr><td>aaaaa</td><td>aaaaa</td><td>aaaaa</td><td>aaaaa</td></tr><tr><td colspan="2">aaaaa</td><td rowspan="4">aaaaa</td><td>aaaaa</td></tr><tr><td>aaaaa</td><td>aaaaa</td><td>aaaaa</td> <td>aaaaa</td></tr><tr><td>aaaaa</td><td>aaaaa</td><td>aaaaa</td> <td>aaaaa</td></tr><tr><td colspan="3">aaaaa</td> <td>aaaaa</td></tr></table></body></html>
案例二 个人简历
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><style>table{table-layout: fixed;width: 800px;}</style><body><table border="1" cellspacing="0" cellpadding="10"><tr><th colspan="8">个人简历</th></tr><tr><td colspan="8">基本信息</td></tr><tr><td>姓名</td><td></td><td>性别</td><td></td><td colspan="2">出生日期</td><td></td><td rowspan="5">照片</td></tr><tr><td>民族</td><td></td><td>政治面貌</td><td></td><td colspan="2">电话</td><td></td></tr><tr><td>籍贯</td><td></td><td>学历</td><td></td><td colspan="2">专业</td><td></td></tr><tr><td>毕业院校</td><td colspan="3"></td><td colspan="2">Email</td><td></td></tr><tr><td >地址</td><td colspan="6"></td></tr><tr><td rowspan="5">教育培训经历</td><td>起止日期</td><td colspan="3">学校名称</td><td colspan="2">所学专业</td> <td>荣誉/证书</td></tr><tr><td></td><td colspan="3"></td><td colspan="2"></td><td></td></tr><tr><td></td><td colspan="3"></td><td colspan="2"></td><td></td></tr><tr><td></td><td colspan="3"></td><td colspan="2"></td><td></td></tr><tr><td></td><td colspan="3"></td><td colspan="2"></td><td></td></tr></table></body></html>
如果觉得《HTML图片标签列表表格以及合并单元格 个人简历小案例》对你有帮助，请点赞、收藏，并留下你的观点哦！
