原生table表格的合并行列

原生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>

总结：合并单元格需要先隐藏多余的单元格，再进行横跨行和横跨列设置