原生table的单元格合并
简单的原生table表格是由一个或多个` tr `、` th ` 或 ` td `标签组合嵌套
- ` tr `标签定义的表格行
- ` th `标签定义表头
- ` td `标签定义单元格
复杂的表格还包括caption 、col 、colgroup、thead、tfoot、tbody等标签,
合并单元格的主要使用的是colspan 和 rowspan 属性,可以设置横跨列和横跨行的值
课程表demo
<table border='1'>
<tr> //行
<th>工作日</th> //单元格
<th>工作日</th>
<th>工作日</th>
<th>工作日</th>
<th>工作日</th>
<th>休息日</th>
<th>休息日</th>
</tr>
<tr>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
<th>周六</th>
<th>周日</th>
</tr>
<tr>
<th>语文</th>
<th>语文</th>
<th>英语</th>
<th>数学</th>
<th>科学</th>
<th>物理</th>
<th>自习</th>
</tr>
</tr>
<tr>
<th>语文</th>
<th>数学</th>
<th>数学</th>
<th>英语</th>
<th>物理</th>
<th>科学</th>
<th>自习</th>
</tr>
</table>
目标:合并工作日和休息日
过程:工作日个数已定,所以将后面4个工作日隐藏,再将第一个工作日横跨5列
<table border='1'>
<tr> //行
<th colspan="5">工作日</th>
<th style='display:none;'>工作日</th>
<th style='display:none;'>工作日</th>
<th style='display:none;'>工作日</th>
<th style='display:none;'>工作日</th>
<th colspan="2">休息日</th>
<th style="display:none;">休息日</th>
</tr>
<tr>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
<th>周六</th>
<th>周日</th>
</tr>
<tr>
<th rowspan="2">语文</th>
<th>语文</th>
<th>英语</th>
<th>数学</th>
<th>科学</th>
<th>物理</th>
<th rowspan="2">自习</th>
</tr>
<tr>
<th style="display:none;">语文</th>
<th>数学</th>
<th>数学</th>
<th>英语</th>
<th>物理</th>
<th>科学</th>
<th style="display:none;">自习</th>
</tr>
</table>
总结:合并单元格需要先隐藏多余的单元格,再进行横跨行和横跨列设置