网页表格怎样设计 第1篇
可以辅助用户快速挖掘出关注的信息，发现数据信息之间的关系，一般可按数字大小、文字拼音顺序、字母顺序、数据的特征等进行排序。
如果表格中不是所有数据都能排序，则需要标识出可排序的列，一般采用箭头做为标识，每次单击顺序相反，实时反馈当前排序中的状态。
控制表内容
网页表格怎样设计 第2篇
一般指空数据或零数据的情况，空白单元格容易造成用户困惑甚至误解，用户会搞不清楚到底是没有数据，还是数值为零。
正确做法是，对于数据为零的单元格，要填上0，且小数点后位数、单位，都要与上下单元格保持一致。
对于没有数据的单元格，通常是用“－”表示。
B端后台数据类型较多，最好能为空数据做出释义，可以加在“列标签”的解释文案中。
网页表格怎样设计 第3篇
由于一份数据报表，往往需要满足各种不同的角色在不同场景下的需求，因而在数据内容上，一般采取宁多勿少的原则——即系统提供尽可能详细的数据给用户。
由此可能就造成了数据指标过多，难以在一个屏幕内完整的展示，导致需要横向拉伸，极大的降低了表格的可读性。
在这个问题上，采取的方法应该是将所有的指标名称罗列在表格上方，并提供复选框选择，在默认情况下仅展示最常用、最重要的几个指标（如下图）。
这样做的好处是用户能在表格上方看多所有的指标名称，避免了原来需要横向拖拽才能浏览到所有指标的情况。
其次，用户可以根据自己的需要，自由的选择显示所需指标，隐藏不必要指标，减少干扰。
B端后台通常会对应不同的角色及不同的需求，可让用户根据自己的需求来定义表格的展示列及列的顺序。
注意：系统应记住用户上一次自定义列的设置。
网页表格怎样设计 第4篇
为了使表格看起来更加美观，我们可以使用CSS来添加样式。你可以为表格、行、单元格等元素定义颜色、边框、间距等属性。00%; border-collapse: collapse; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; }
网页表格怎样设计 第5篇
尽量减少列的数量，关注用户需要的必要信息，避免出现用户不需要的数据，同时要避免数据缺失，用户需要的非重点、辅助性信息可以通过次级入口来解决。
在表格数据可以自我解释的情况下，列标签就不是必须的了，如电子邮件的表格，就不需要列标签，因为发件人和邮件主题以及时间的区分度比较高。
网页表格怎样设计 第6篇
合适的对齐方式能够提升数据的浏览效率。表格内信息的纵向列对齐能够很好的形成视觉引导线。
通过对齐，会让表格更加规范易理解，给用户视觉上的统一感，视线流动更顺畅，让用户快速的捕捉到所需内容。
可以遵循3条半对齐原则：
数字是从右向左读的——这是因为我们对比数字时，首先看个位，然后十位、百位。
当个位数值对齐时，我们就可以快速查看前面的数值，比较多个数据的大小。
因此，表格的数字应当右对齐。因为我们阅读文字信息是从左向右读，所以不采用左对齐，会降低浏览文字的效率。
表头应当同数据的对齐方式一致，这能保持表格竖直方向整洁，营造一致性。
居中对齐会导致表格的行参差不齐，浏览数据会更难，常常需要额外的分隔物。固定的内容居中对齐，如状态文字(成功，失败等)，这样的话信息呈现会更加突出，并能节省表格空间。
跨列合并单元格时，内容顶对齐。多行的数据表，用户从上往下阅读时往往搞不清楚对应的数据列内容。
跨行合并时，灵活处理，一般指多级表头，采用居中对齐，相应的未合并的表头页签也要居中对齐。如：日期之类的数字应采用始终相同的长度进行格式化，如：2020/07/19而不是2020/7/19。
网页表格怎样设计 第7篇
当表格的数据量较大时，可增加搜索功能和对数据的分类来提升用户查找数据的效率，提供多维的筛选和排序，减少用户寻找信息的时间。
也有特殊情况，比如查询保密性较高的账号密码列表时，需要精确输入。
因为如果用户要查询的某类个体具有多个属性，组合条件的查询显然是更合理的。
如下图所示：
如果筛选操作通常是单个条件独立查询，各个筛选条件都是相互独立的，那么一般设计是填好一个条件便自动查询。面对单选框还是下拉框，筛选条件有些需要汇总数据的，有些只需看单一条件下的数据。
比如状态包含“已发布、未发布和待审核”，除了需要统计各状态的数据，还需汇总数据，此时则是做成单选框比较好，如下图所示。
如果不需要汇总数据，则可以是下拉框或者Tab显示，如下图：
我认为如果筛选值少于6个，可以用Tab显示；多于6个，则是下拉框比较好。
网页表格怎样设计 第8篇
悬停(操作/选中表格/放大）
当鼠标悬停时，可对当前行背景作出区分，辨别光标所在行，或放大悬停行区域，达到醒目的效果。
当提出额外的操作时，用户悬停可以使用户聚焦于当前操作。如谷歌邮箱：
空表
在表格的空白内容处加入创建的快捷入口，引导用户新建表格，或者父级页面提示倒入数据。
如下图邮箱已发送邮箱为空时：
没有创建诉求的，直接告之暂无数据。如数据是系统产生的，不是由用户创建的，直接告之暂无数据，话术的表述则需与后台文案的整体风格保持一致。
关于表格设计就大概讲完了，在总结归纳中也发现了自己平常设计表格中的其他问题。个人感觉还是有很多漏洞，说的不正确的，欢迎大家指正。
参考文献链接
表格设计攻略
2.数据表的用户界面最佳设计
3.设计表格的可重用性
网页表格怎样设计 第9篇
有时会使用不同粗细的纵向分割线对信息进行区隔，增加同类信息的对比性。也可以任意指定数据列强调显示，表示当前的操作结果。
如下图，表示目前日期正在降序排列：
为便于用户对数据进行对比分析，可以在原始数据的基础上给出差值、升降变化、平均值、总计等数据处理结果，减少用户心算和再做数据加工的过程，使重要信息突出，提高用户的阅读速度，帮助用户快速定位和了解重点信息。
单元格数据展示
网页表格怎样设计 第10篇
比如用户重点关注数据状态、某些数据的上升和下降等，可以用符号进行标识，帮助用户快速定位到目标信息。
下图音乐排行榜用带颜色升降小图标示意当前歌曲排行状态，红色为上升、绿色为下降：
分隔线
水平分隔线，能显著减轻表格在垂直方向的视觉重量，提升用户进行大量数据对比时的速度。
垂直分隔线，在表格中使用适合的对齐方式后，那么就可以省略；数据量级比较大的表格，建议保留，可以使用较淡的分隔线，提升浏览速度。
下图采用了同时采用了水平和垂直分隔线：
如果在表格中使用适合的对齐方式，分隔线就是多余的。但由于数据量级不同，即使要用，分隔线也要淡，不能妨碍快速浏览。
分页及翻页
用户一般是能不用翻页就不会用翻页功能，涉及到跨页的数据操作时，分页会带来不便。
但受限于数据加载的压力，在WEB端、手机端等需要实时下载数据的终端，通常需要分页展示数据来缓解服务器的压力，因此用户需要分页查看和操作。
而在客户端，数据已下载到了本地，就可以采用无限滚动的方式呈现数据，不需要分页展示，这样用户操作的成本更低。
在WEB端，表格的的数据内容超过一定“数量”时需要提供翻页功能，这个“数量”由表头的数据的高度、表格的行间距、目标用户群体的显示设备的配置等因素来决定。
原则是不要超过一屏，考虑到每个用户的使用习惯，可以让用户自定义每页的显示的数量，相比于跨屏翻页而言，向下滚屏会更便利。
翻页控件内容 ：用户自定义每页显示的数量，当前页码(行数)，全部数据的页数(行数)，向前翻页，向后翻页，到达第一页，到达最后一页等。
注意:
翻页控件做为筛选数据的一种方式，通常会结合日历、排序、筛选等其它控件一起使用，来提升用户的操作效率。
如：网易的邮箱，翻页与日历结合一起使用，对于有大量邮件数据的用户来说，查阅邮件的效率更高。
无限滚动/延迟加载呢？