HTML表格的单元格合并

如何做一个花里胡哨的表格

  单元格合并是一个比较常见的需求，特别是数据展示的页面，需要大标题然后下面有多个小标题，这么常见的需求，所以我们也要学习怎么制作一个缺胳膊少腿的表格。我们先看一下题目，以下两个表格怎么做？

我们可以分步骤来搞定他，我们用第一个左上角的做例子。 第一步我们先做一个九宫格的表格出来，看过上一篇的朋友应该是能做了。

1. 接着我们先确定我们要合并的表格是第一行第一个和第二行第一个，所以我们可以说第一个把第二个吃了。
2. 确定合并的单元格数量，这里不难看出是合并了两个单元格
3. 确定是跨行合并还是跨列合并，这里有点绕。需要大家思考一下（我自己总结的口诀：上下跨行，左右跨列），确定一下是跨行还是跨列（跨行用rowspan,跨列用colspan），这里的是跨行合并
4. 做完这些后，删除被吃掉的单元格，也就是删除第二行第一个单元格，这样我们我们就成功地合并了第一行第一个和第二行第一个单元格。
   
   做完第一个，小伙伴可以试着把接下来的都做完。
   下面的就比较常见的一种应用场景，感兴趣的朋友可以试一下做完。

我们先做一个分析：

1. 表头一共有两行，第一行第一个和第二行第一个合并，第一行第2,3个合并，第一行4,5个单元格合并，第一行第6和第二行第6个合并。
2. 确定各个合并的单元格数量
3. 确定是跨行合并还是跨列合并，（上下跨行，左右跨列（跨行用rowspan,跨列用colspan）。
4. 删除多余的单元格。

分析就做完了，动手试试吧，实践才是检验真理的标准，加油。