WEB表格设计攻略

表格table，在学习html标签时，必定会介绍的一个标签，也是web项目中使用很广泛的一个标签。往往用于将数据分类汇总展示。
本文就为您介绍web项目中表格的使用

操作方法

（01）表格-用途1）表格table标签主要用来展示列表数据，分行列展示比较直观，还可能带有汇总行显示2）表格除了显示列表数据外，还可以用来页面布局，因为表格可以设置占用页面百分比，所以，可以用来做页面自适应宽度效果，只是，表格需要填充完整数据才会开始在页面呈现，如果用表格布局，且内部非常多内容，当网络慢的时候，界面可能会出现一段时间的空白3）本文使用vscode作为编辑器，演示表格的使用（在vscode中新建html文件后，输入一个感叹号，在按一下tab键，就可以快速构建html5的dom结构）

（02）表格-默认样式1）表格table标签默认是不带任何样式的2）边框都没有，宽度也不会沾满一整行

（03）表格-边框1）通过css样式+table标签设置表格边框是实际项目中常用的方式2）表格分为单元格边框，行边框，所以需要将两个边框合并成一个显示

（04）表格-奇偶行颜色1）奇偶行颜色也是通过css+table标签实现的2）odd表示奇数行，even表示偶数行3）css选择器如果从表体开始，则从第一个数据行开始计算奇偶4）css选择器如果是整个表格，那么表头也参与计算奇偶行

（05）表格-合并单元格1）无论多么复杂的表格合并，最终都是基于行、列单元格合并的2）行单元格合并，使用rowspan3）列单元格合并，使用colspan

（06）表格-冻结表头1）web的表格标签默认是没有冻结表头的功能的2）由于冻结表格需要css+js的辅助，且每个浏览器效果还有点不一样，因此，不建议个人自己实现，为了使用方便与快速，建议直接使用成熟的列表控件，如jqgrid表格控件、easyui前端框架、bootstrap框架等等3）jqgrid表格控件可以冻结表头、合并表头、按列名称排序等等功能，默认jqgrid列表样式如图所示

（07）表格-布局1）使用表格布局可以让页面宽度自适应，当宽度不够的时候，表格内的文字会自动换行2）注意：最好不要将非常多的内容塞到table中作为页面的相对顶级的布局，否则，可能造成页面加载慢的样子