网页制作表格如何拆分 第1篇
本例中table第一行和第一列都属于Excel表格的表头，需要固定不动。网上有解决方案就是使用两个table，一个做表头，一个做表身，这种方案只能解决列表头的问题，如果要同时解决固定行表头和列表头的问题，可能需要三个table，这样的方案会让页面布局变得十分复杂，难以维护，违背我们简单直观的初衷。
为了让代码尽量简洁而优雅，有没有基于当前这一个table的办法呢？当然有，网上已经有人介绍过了，那就是将表头采用relative布局，并通过滚轮事件实时更新表头位置：
1. 给第一行表头添加col-header类，给第一列表头添加row-header类，注意：左上角第一个单元格，既是行表头又是列表头
2. 给所有表头单元格设置样式position: relative，并加上底色（表头得看上去像表头的样子）
3. 监听外层div的滚动事件，实时更新列表头的top值为div的scrollTop值，实时更新行表头的left值为div的scrollLeft值，这一步是关键，主要是保持表头的位置，让表头单元格不随着滚动条的滚动而移动。
html代码：
css代码：
js代码：
效果如下图所示，可以实现内容滚动，而横竖表头都不动。
然而如图所示还有一点问题，就是左上角压盖的问题，这个问题也很简单，我们只需要把第一行第一列的单元的z-index值设置为1即可，让它始终在其他单元格上面就不会被覆盖了。
这种方案在chrome上表现十分完美，但是在ie会出现表头闪烁的问题，估计与ie触发滚动事件的频率或机制有关，如果对浏览器没有要求，那么十分推荐这种方式，如果无法容忍ie上的表头闪烁问题，那就只能另想办法了。
网页制作表格如何拆分 第2篇
在上一步完成后，就可以开始做单元格合并与拆分了，即将当前选中区域的所有单元格合并，或将已经合并的单元格拆分。
table标签本身就支持合并单元格，这也是一开始技术选型使用table而不是div的好处之一，具体方法看图分析如下：
1. 选区中第一个单元称之为扩展单元格，本例中只需要设置该单元格的colspan=3，rowspan=4，即可达到扩展的效果，即合并单元格效果
2. 选区中其他单元格称之为被合并单元格，被合并单元格如果不做任何处理，会被扩展单元格挤开而向两边顺延导致整个table不规则；如果直接把这些被合并的单元格remove掉，那么后面做拆分单元格的时候又需要重新create出来；因此最好的处理办法是将他们设置为display:none，拆分单元格的时候去掉display样式即可。
3. 为了后面做拆分单元格更加方便，我们需要把这一次合并的单元做一个统一的标记，例如统一添加一个merged-by属性，属性值为扩展单元格的行列坐标。
拆分单元格实际上就是合并单元格的逆过程：
1. 把当前要拆分单元格的colspan和rowspan属性去掉
2. 把之前被合并的单元格根据merged-by属性一次性选出来（此处是关键），去掉display属性，去掉merged-by标记
效果如图所示
网页制作表格如何拆分 第3篇
当有了合并单元格后，第六节中的单元格选中功能就存在bug了，可能存在如下情况：
因此一旦选区中包含了合并的单元格，那么整个选区范围的计算就不一样了，此时我们需要把所有相关的合并单元格都要纳入到选区范围计算中来。如果整个表格中存在多个合并单元格，情况会变得更加复杂：每次纳入一个合并单元格后，选区范围可能会扩大，选区范围扩大后可能会再与另一个合并单元格相交，这时就需要继续扩大选区，直到再没有与其他合并单元格相交为止，已经变成一个递归问题了，考虑性能问题，还是转换为循环问题处理。
本文采用边缘扫描法来实现循环扩展选区：
1. 给定一个初始的左上角和右下角单元格坐标；
2. 扫描初始坐标构成的矩形边缘单元格，寻找是否存在合并单元格（有merged-by属性或colspan属性）；
. 如果找到了合并单元格，获取该合并单元格左上角和右下角坐标，并与初始坐标范围对比；
如果超出了初始坐标，则扩大初始坐标至可以包含该合并单元格，返回到第1步；
没有超出坐标则继续；
. 如果没有找到则继续；
3. 最终得到的坐标范围即为当前完整的选区。
下图说明了整个边缘扫描算法的选区扩大过程：
修改之前的region_select方法如下：
View Code
效果图如下，图中“起”表示鼠标开始位置，“止”表示鼠标结束位置，由于受图中三个合并单元格的影响，整个选取扩大至刚好能包含三个合并单元格的范围：