Web页面中的表格设计，远没那么简单

表格采用了同样灰度与透明度的横纵分割线，斑马线以及悬停高亮底色能够很好的引导用户的视线，避免在阅读时出现错行、迷失的情况。同时没有强调单个数据，或者数据之间的关系，仅做纯粹的数据展示，页面客观，避免各种错误的引导。

(2)分割线案例2

采用独立数据，弱化纵向分割线，采用悬浮高亮显示，展示一条数据的完整性。

(3)分割线案例3

采用横线构架出行的视觉，数据信息均匀分布。同时，用纵向分隔线对数据进行分类，表达出数据之间的类别关系，具有明确的数据类别指向。

(4)分割线设计建议

1. 对于数据之间的关系紧密且有对比关系的，可以采用横向与纵向分割线;
2. 对于较有独立性的数据可强调横向分割线，弱化纵向分割线;
3. 对于每条数据中的字段有分类的表格，可以在强调横向分割线的同时，弱化同类数据的纵向分割线，而强调数据类型之间的纵向分割线。

2、勾选框

在表格中，勾选框主要用于选择条目并进行批量操作。

(1)勾选框案例1

方案采用全选框与下拉选择来实现全选的范围。直接点击全选框，默认全选本页的全部条目。点击下拉箭头，显示不同的全选范围类型，可点击选择。

注：相关网站建设技巧阅读请移步到建站教程频道。

（编辑：西安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!