需求背景
老板：这段时间找工作的牛马比较多，我们系统要上一个面试人员登记打印出表格！前端半天能完成不？
我：半天差不多吧！但是先要看一下模板长什么样子~
老板：行，等下发你...
过了10分钟老板发过来了，如下：
- 看到这张表，首先想到的是用div+flex布局！写了大概10分钟，发现布局的结构比较多，div套div一层层的无限套娃啊！果断放弃了这个方案。
- 那就用grid布局，说实话这个布局用得少，只能边干边看文档。做出来第一行后果断放弃了。确实是自己太菜了，没理解这些属性，画得也比较慢。
- 实在不行，就用table，tr，td标签吧，回归原始。发现效果还不错，涉及到一些跨行跨列有现成的属性rowspan与colspan。简单的事情还是得回归纯真最好！
其实用table标签最大的问题就是涉及到跨行列的时候，我得一个个td去数。一不小心就多出一个，或者少一个。
最终画了半天时间，终于弄得七七八八了。这时老板正好下工位视察，看到我画好的表格说弄得不错呀。。效果挺好，再帮我画一个人员转正申请表吧。
模板如下
找现成工具
1.其实我一开始就在想，做这种表格最专业的工具不就是excel与word吗？如果能让公司的行政部门把表格画好，再导出成HTML呢？想法很美好，就看怎么实现了，于是乎就百度呗！搜索了一大圈，不是要收费就是AI广告。根本就没有简单而又实用的。
2.找图形界面的表格生成器，在菜鸟教程里面发现了一个。www.jyshare.com/front-end/7… 满怀期待的打开，结果发现它只能绘出行与列，没办法跨行跨列。
造轮子（表格生成器）
周树人曾说过：不要重复造轮子，除非没有轮子！
首先造轮子不是我的本意，我也是被逼的。谁知道老板后续还要让我画一些啥表格呀。看这种趋势，估计会发货单，物流清单，发票，以及与行政有关的各种表格，都会要集成到系统里面。到时候如果效率跟不上，估计就会被优化了。
其实这个轮子的作用就是在图形界面上画一张基础的表格，然后手动调整单元格的跨行跨列！然后一键生成HTML代码。界面如下：
实际效果
源码地址：github.com/zy1992829/z… 效果地址：zy1992829.github.io/zytableGene…
总结
该轮子还有不完善的地方，感兴趣的朋友可以一起参与进来优化！最后生成出来的效果还需要代码样式优化以及微调。但是大大的节省了手动写table的精力。如果觉得这篇文章对你有帮助，就点赞+收藏吧！有问题欢迎留言~
