WEB表格设计攻略

表格table，在进修html标签时，必心猿意马会介绍的一个标签，也是web项目中利用很普遍的一个标签。往往用于将数据分类汇总展示。

本文就为您介绍web项目中表格的利用

方式/步调

1
表格-用途
1）表格table标签本家儿要用来展示列表数据，分行列展示比力直不雅，还可能带有汇总行显示
2）表格除了显示列表数据外，还可以用来页面结构，因为表格可以设置占用页面百分比，所以，可以用来做页面自顺应宽度结果，只是，表格需要填充完整数据才会起头在页面呈现，若是用表格结构，且内部很是多内容，当收集慢的时辰，界面可能会呈现一段时候的空白
3）本文利用vscode作为编纂器，演示表格的利用（在vscode中新建html文件后，输入一个感慨号，在按一下tab键，就可以快速构建html5的dom布局）
4前端页面开辟东西的下载与安装
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列表样式如图所示
7
表格-结构
1）利用表格结构可以让页面宽度自顺应，当宽度不敷的时辰，表格内的文字会主动换行
2）注重：最好不要将很是多的内容塞到table中作为页面的相对顶级的结构，不然，可能造当作页面加载慢的样子

发表于 2018-12-03 00:00
阅读 ( 1305 )
分类：其他类型

WEB表格设计攻略

方式/步调

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »

推荐文章