HTML复杂表格绘制实现思路

#麻辣小龙虾#

已于 2023-04-17 16:13:43 修改

阅读量4.7k

点赞数 3

分类专栏： html web前端文章标签： html excel word

于 2020-03-07 18:44:55 首次发布

本文链接：https://blog.csdn.net/CodingNoob/article/details/104719529

版权

web前端同时被 2 个专栏收录

99 篇文章 2 订阅

订阅专栏

html

10 篇文章 0 订阅

订阅专栏

最近在做项目的时候遇到一个需求，要做一个表格，这个表格是Excel里面业务人员绘制好的，表格结构比较复杂，如果要自己一个一个地用table去编写需要花很长的时间，于是想了下要怎么去实现复杂表格的方案，话不多说。

比如如果要实现下面的表格（这个还算好的了，如果更复杂那应该怎么办）：

于是，我想了下，能不能找到一些工具插件之类的去实现，找了一两个小时之后发现还是没有，然后以前刚毕业的那段时间在小公司要经常帮业务的同事看一些Excel或者word的问题，然后自己看了下Excel中有个选项可以直接导出html，然后自己导出了一下看了下。

发现打开之后看到里面的源代码里面也是一个table标签绘制的，只是多了些垃圾代码，不过不会影响结构使用，只是多了一些样式，我们可以根据自己业务情况覆盖掉样式，或者自己去删除垃圾代码样式就好了。这样就可以避免自己去一个一个的绘制复杂的表格，相对来说会省很多时间。

最终复制出来的代码如下：

<table border="0" cellpadding="0" cellspacing="0" width="817" style="border-collapse:
 collapse;table-layout:fixed;width:614pt">
 <colgroup><col width="145" style="mso-width-source:userset;mso-width-alt:4640;width:109pt">
 <col width="115" style="mso-width-source:userset;mso-width-alt:3680;width:86pt">
 <col width="153" style="mso-width-source:userset;mso-width-alt:4896;width:115pt">
 <col width="166" style="mso-width-source:userset;mso-width-alt:5312;width:125pt">
 <col width="72" style="mso-width-source:userset;mso-width-alt:2304;width:54pt">
 <col width="166" style="mso-width-source:userset;mso-width-alt:5312;width:125pt">
 </colgroup><tbody><tr height="39" style="mso-height-source:userset;height:29.25pt">
  <td colspan="6" height="39" class="xl65" width="817" style="height:29.25pt;
  width:614pt">表格标题</td>
 </tr>
 <tr height="19" style="height:14.25pt">
  <td height="19" class="xl66" style="height:14.25pt;border-top:none">单元格内容</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
  <td rowspan="2" class="xl68" style="border-top:none">单元格内容</td>
 </tr>
 <tr height="19" style="height:14.25pt">
  <td height="19" class="xl66" style="height:14.25pt;border-top:none">单元格内容</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
 </tr>
 <tr height="19" style="height:14.25pt">
  <td height="19" class="xl66" style="height:14.25pt;border-top:none">单元格内容</td>
  <td rowspan="2" class="xl65" style="border-top:none">单元格内容</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
 </tr>
 <tr height="19" style="height:14.25pt">
  <td rowspan="2" height="38" class="xl68" style="height:28.5pt;border-top:none">单元格内容</td>
  <td rowspan="2" class="xl65" style="border-top:none">单元格内容</td>
  <td rowspan="2" class="xl68" style="border-top:none">单元格内容</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
 </tr>
 <tr height="19" style="height:14.25pt">
  <td height="19" class="xl67" style="height:14.25pt;border-top:none;border-left:
  none">　</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
 </tr>
 <tr height="19" style="height:14.25pt">
  <td height="19" class="xl66" style="height:14.25pt;border-top:none">单元格内容</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
 </tr>
 <tr height="19" style="height:14.25pt">
  <td height="19" class="xl66" style="height:14.25pt;border-top:none">单元格内容</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
  <td rowspan="2" class="xl65" style="border-top:none">单元格内容</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
  <td rowspan="9" class="xl65" style="border-top:none">单元格内容</td>
 </tr>
 <tr height="19" style="height:14.25pt">
  <td rowspan="5" height="95" class="xl68" style="height:71.25pt;border-top:none">单元格内容</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
 </tr>
 <tr height="19" style="height:14.25pt">
  <td height="19" class="xl67" style="height:14.25pt;border-top:none;border-left:
  none">　</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
  <td rowspan="2" class="xl68" style="border-top:none">单元格内容</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
 </tr>
 <tr height="19" style="height:14.25pt">
  <td height="19" class="xl67" style="height:14.25pt;border-top:none;border-left:
  none">　</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
 </tr>
 <tr height="19" style="height:14.25pt">
  <td height="19" class="xl67" style="height:14.25pt;border-top:none;border-left:
  none">　</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
 </tr>
 <tr height="19" style="height:14.25pt">
  <td height="19" class="xl67" style="height:14.25pt;border-top:none;border-left:
  none">　</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
  <td rowspan="2" class="xl68" style="border-top:none">单元格内容</td>
 </tr>
 <tr height="19" style="height:14.25pt">
  <td height="19" class="xl66" style="height:14.25pt;border-top:none">单元格内容</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
  <td colspan="2" class="xl69" style="border-left:none">单元格内容</td>
 </tr>
 <tr height="19" style="height:14.25pt">
  <td height="19" class="xl66" style="height:14.25pt;border-top:none">单元格内容</td>
  <td rowspan="2" class="xl65" style="border-top:none">单元格内容</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
 </tr>
 <tr height="19" style="height:14.25pt">
  <td height="19" class="xl66" style="height:14.25pt;border-top:none">单元格内容</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
  <td class="xl66" style="border-top:none;border-left:none">单元格内容</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
 </tr>
 <tr height="19" style="height:14.25pt">
  <td height="19" class="xl66" style="height:14.25pt;border-top:none">单元格内容</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
  <td class="xl66" style="border-top:none;border-left:none">单元格内容</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
  <td class="xl67" style="border-top:none;border-left:none">　</td>
 </tr>
 <!--[if supportMisalignedColumns]-->
 <tr height="0" style="display:none">
  <td width="145" style="width:109pt"></td>
  <td width="115" style="width:86pt"></td>
  <td width="153" style="width:115pt"></td>
  <td width="166" style="width:125pt"></td>
  <td width="72" style="width:54pt"></td>
  <td width="166" style="width:125pt"></td>
 </tr>
 <!--[endif]-->
</tbody></table>

然后你就可以直接使用html的表格结构了，就不用纠结去写复杂的表结构。