共计 675 个字符，预计需要花费 2 分钟才能阅读完成。
应用场景
有时候我们的表格比较复杂，表头可能到处割裂，我们还需要写代码去完成这个样式，所以学会在原生 html 处理复杂的表格还是比较重要的。
下面我们来看这一张图：
我们可以看到有些表头项的规格不太一样，有 1 *1 2*1 1* 2 等多种规模，我们的任务就是用 html 搭建好这个样式即可
语法介绍
我们使用 html5 的 table 标签，我们的一个表设计两个部分：表头，表内容 ，分别对应thead 和tbody标签
我们使用 tr 标识一行数据，th表示表头的一格，td表示表内容的一格，
其中表标题包含在表头中，使用 caption 标签即可声明，其和 tr 标签同级
我们设计这样一个表，首先数有多少行，
然后将最顶上的第一行，写在第一个 tr 当中
然后将最顶上的第二行，写在第二个 tr 当中
碰到占两行的设置 rowspan=”2″，
碰到占两列的设置 colspan=”2″，
按照如上方法，我们就可以在 html 画出任何方格样式的图表了，下面是代码（注意样式哦）：
Document
我是表的标题
项目 1
项目 2
项目 3
项目 4
项目 3 -1
项目 3 -2
项目 4 -1
项目 4 -2
内容 1
内容 2
内容 3
内容 4
内容 5
内容 6
内容 1
内容 2
内容 3
内容 4
内容 5
内容 6
内容 1
内容 2
内容 3
内容 4
内容 5
内容 6
内容 1
内容 2
内容 3
内容 4
内容 5
内容 6
内容 1
内容 2
内容 3
内容 4
内容 5
内容 6
使用插件
原文地址: 前端技巧——复杂表格在 html 当中的实现
正文完
