应用场景
有时候我们的表格比较复杂，表头可能到处割裂，我们还需要写代码去完成这个样式，所以学会在原生html处理复杂的表格还是比较重要的。
下面我们来看这一张图：
我们可以看到有些表头项的规格不太一样，有1*1 2*1 1*2等多种规模，我们的任务就是用html搭建好这个样式即可
语法介绍
我们使用html5的table标签，我们的一个表设计两个部分：表头，表内容，分别对应thead和tbody标签
我们使用tr标识一行数据，th表示表头的一格，td表示表内容的一格，
其中表标题包含在表头中，使用caption标签即可声明，其和tr标签同级
我们设计这样一个表，首先数有多少行，
然后将最顶上的第一行，写在第一个tr当中
然后将最顶上的第二行，写在第二个tr当中
碰到占两行的设置rowspan="2"，
碰到占两列的设置colspan="2"，
按照如上方法，我们就可以在html画出任何方格样式的图表了，下面是代码（注意样式哦）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #000000; padding: 8px; text-align: center; } </style> </head> <body> <div id="root" style="width: 100vw;height: 100vh"> <table> <thead> <caption style="color: red;">我是表的标题</caption> <tr class="oneRow"> <th rowspan="2">项目1</th> <th rowspan="2">项目2</th> <th colspan="2">项目3</th> <th colspan="2">项目4</th> </tr> <tr class="oneRow"> <th>项目3-1</th> <th>项目3-2</th> <th>项目4-1</th> <th>项目4-2</th> </tr> </thead> <tbody> <tr> <td> 内容1 </td> <td> 内容2 </td> <td> 内容3 </td> <td> 内容4 </td> <td> 内容5 </td> <td> 内容6 </td> </tr> <tr> <td> 内容1 </td> <td> 内容2 </td> <td> 内容3 </td> <td> 内容4 </td> <td> 内容5 </td> <td> 内容6 </td> </tr> <tr> <td> 内容1 </td> <td> 内容2 </td> <td> 内容3 </td> <td> 内容4 </td> <td> 内容5 </td> <td> 内容6 </td> </tr> <tr> <td> 内容1 </td> <td> 内容2 </td> <td> 内容3 </td> <td> 内容4 </td> <td> 内容5 </td> <td> 内容6 </td> </tr> <tr> <td> 内容1 </td> <td> 内容2 </td> <td> 内容3 </td> <td> 内容4 </td> <td> 内容5 </td> <td> 内容6 </td> </tr> </tbody> </table> </div> </body> </html>
使用插件
