WEB表格设计攻略 _小知识

表格table ，在进修html标签时，必定会介绍的一个标签，也是web项目中利用很普遍的一个标签。往往用于将数据分类汇总展示。
本文就为您介绍web项目中表格的利用
方式/
1表格-用途
1）表格table标签本家儿要用来展示列表数据，分行列展示比力直不雅，还可能带有汇总行显示
2）表格除了显示列表数据外，还可以用来页面结构，因为表格可以设置占用页面百分比，所以，可以用来做页面自顺应宽度结果，只是，表格需要填充完整数据才会起头在页面呈现，若是用表格结构，且内部很是多内容，当收集慢的时辰，界面可能会呈现一段时候的空白
3）本文利用vscode作为编纂器，演示表格的利用（在vscode中新建html文件后，输入一个感慨号，在按一下tab键，就可以快速构建html5的dom布局）
4前端页面开辟东西 - VSCode的下载与安装

文章插图

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

文章插图

3表格-边框
1）经由过程css样式+table标签设置表格边框是现实项目中常用的体例
2）表格分为单位格边框，行边框，所以需要将两个边框归并当作一个显示

文章插图

4表格-奇偶行颜色
1）奇偶行颜色也是经由过程css+table标签实现的
2）odd暗示奇数行， even暗示偶数行
3）css选择器若是从表体起头，则从第一个数据行起头计较奇偶
4）css选择器若是是整个表格，那么表头也介入计较奇偶行

文章插图

5表格-归并单位格
1）无论何等复杂的表格归并，最终都是基于行、列单位格归并的
2）行单位格归并，利用rowspan
3）列单位格归并，利用colspan

文章插图

6表格-冻结表头
1）web的表格标签默认是没有冻结表头的功能的
2）因为冻结表格需要css+js的辅助，且每个浏览器结果还有点纷歧样，是以，不建议小我本身实现，为了利用便利与快速，建议直接利用当作熟的列表控件，如jqgrid表格控件、easyui前端框架、bootstrap框架等等
3）jqgrid表格控件可以冻结表头、归并表头、按列名称排序等等功能，默认jqgrid列表样式如图所示