最近在做项目的时候遇到一个需求,要做一个表格,这个表格是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的表格结构了,就不用纠结去写复杂的表结构。