联系我们 face+ 关于 服务 案例
首页 案例 服务 关于 face+

有哪些网页表格设计技巧提供给大家参考

Time: 2021-05-25

网页设计的内容很多,表格就是其中一种常见的表达方式。网页中的表格设计跟文档中的表格设计有很多不同。那网页表格设计是怎么做的?有哪些网页表格设计技巧提供给大家参考呢?今天就让faceui为大家介绍一下。

  网页表格设计技巧

  1、行高是表格浏览时的重要参数

  行高是表格非常重要的参数,行高间距直接影响着阅读的体验,有如同Omniature为了最大限度的放置数据内容,强化数据显示效果而降低行高的情况,也有SugarCRM一样的行高较高可以放置更多文本信息的表格。

  2、斑马线更好的引导阅读

  斑马线和悬停时的整行变化也是表格中能引起视觉变化的重要元素,斑马线会使得行与行的界限更为分明,尤其对数据列较多时的横向引导得到加强,这样看行内的内容时不容易错行,而悬停变色行主要是配合操作交互,为了明确区分出光标所在的行。

网页表格设计

网页表格设计(图片来自网络)


  3、选择和操作提升使用效率

  对表格数据的选择会有单选多选或者全选的情况,如果遇到数据项很多有翻页,全选的位置就会增加一些选项来确定是当页全选还是整表全选,这种表格是将选择区域放置在表格的左侧第一列,也有表格的设计是将选择放在右侧最后一列,好处在于浏览完一行的信息就可以确定是否需要选择该行内容进行下一步操作。

  4、排序使表格活起来

  排序是表格里经常需要使用的操作,可以更为快捷的发掘出关注的信息,一般会有升序和降序两种,当前比较常见的是上下空心箭头默认,上箭头为升序,下箭头为降序,也有通过明确说明来提示排序的方式。也会出现这种多重排序的表,其实是将列的数据排序区域作为单独的控制区进行操作,以实现多个维度的排序。

网页表格设计

网页表格设计(图片来自网络)


  怎样进行网页表格设计

  1、打开编辑器,在网页的标签内插入标签,属性border显示边框。

  2、使用行和表格进行创建5行3列的表格。

  3、每个网格添加数据,表格里的文字。

  4、设置表格的宽度和表格的间距的距离,分别使用cellspacing和width属性。

  5、给表格的第一行添加灰色背景,字体大小设置。

  6、在使用表格时候,首先确定表格的行和列数,在对每个部分进行使用标签对属性进行修改。

  以上就是faceui为大家介绍的关于网页表格设计的相关内容。网页表格设计明显不同于其他的网页设计,在设计时不但要了解上述介绍的网页表格设计技巧,也需要注意表格的行列问题。


合作咨询

上海(总部)

上海市浦东新区郭守敬路498号22号楼
021-61057328
service@faceui.com

办公地址地图

北京

北京市东城区后永康17号A座
010-64015620
service@faceui.com

办公地址地图

成都

四川省成都市锦江区东大街牛王庙段100号
028-62790929
service@faceui.com

办公地址地图
首页 | 案例 | 服务 | 关于 | face+ | 智见

Copyright © 2009-2022 FaceUI design. All rights reserved


沪ICP备13044459号-5

上海办公地点地图
北京办公地点地图
深圳办公地点地图
在微信中搜索faceui
或保存二维码在微信中打开