【转载：web表格设计建议】
转载来源：http://www.woshipm.com/ucd/645427.html
（1）筛选
- 对于筛选条件没有交叉的场景，当条件少于五个，制作成table切换；超过五个少于二十个，采用下拉选择；多与二十五个，为下拉选择添加模糊匹配设置，并配备实时刷新；
- 对于筛选条件有交叉的场景，建议采用展开形式，并配备手动加载刷新。
- 对于需输入筛选条件的场景，如日期筛选条件，单独处理，展示出来。
（2）搜索
- 搜索输入框尽量采用模糊搜索，不要让用户去辨认、识别要输入的内容；
- 对于多个搜索条件交叉搜索的场景，建议采用高级搜索按钮，将其打包收起，并配置重置按钮，便于一键清空所有搜索条件，便于接下来的搜索。
（3）表头
- 在数据显示超过40条时（电脑屏幕一屏无法完全显示，需要滚动查看时），且表格中的数据不能直观的展示出数据类型，建议采用固定表头的形式，时刻显示数据类型；
- 当字段数量过多，需要横向滚动表格，且需要对比数据时，采用固定属性列字段。
（4）字段
- 对于字段数据没有明确分类，或者有些数据不太重要，可以采用横向滚动条，进而固定左侧属性列，便于数据对比；
- 对于数据有类别区分，可以采用分类展示，切换button放在顶部或列表中
- 字段在五个以下，且字段的类型较为常见，或能够用简短的文字描述清楚，可采用单词或词组来作为字段；
- 若字段超过五个，或不常见字段类型，或者简短文字不能阐述清楚，可以考虑使用缩写或者特殊单词做字段，另附解释文字。
（5）排序
- 字段在五个以下，排序可以采用明确的排序类型指向性明确的ICON；
- 字段数量大于等于五个时，只显示排序图标，而不显示类型。
（6）分割线
- 对于数据之间的关系紧密且有对比关系的，可以采用横向与纵向分割线；
- 对于较有独立性的数据可强调横向分割线，弱化纵向分割线；
- 对于每条数据中的字段有分类的表格，可以在强调横向分割线的同时，弱化同类数据的纵向分割线，而强调数据类型之间的纵向分割线。
（7）勾选框
- 当数据超过一页时，对全选操作提供全选范围；
- 当数据具有类型时，可以考虑对数据的不同类型进行全选；
- 对于逐条勾选的数据，若需要查阅数据后决定是否勾选，勾选框可以放在条目后面；当不需要查阅数据就能确认是否勾选，勾选框应该放在条目前面。
（8）对齐
- 数据右对齐，文字左对齐，尽量保证数据的小数点后单位一致；若不能，则以个位数为基准，居中对齐
（9）操作项
- 对于单条数据操作频繁的场景，操作项不操作三个时，操作项跟在条目后面，常见操作仅用ICON，不常见操作用ICON+文字，当超过三个时，建议将操作折叠收起。
- 对于数据批量操作频繁的场景，建议将操作放到表格顶部，与勾选操作配合使用。
（10）空单元格
- 在任何情况下，单元格都不应该空置出现，避免用户的困惑。针对不存在的数据可以用其他占位符，告知用户该单元格不存在数据；对于数据为零的单元格，与上下数据单位、小数点相同的0来表示。
（11）行高
- 对于单行显示数据内容的表格，建议行高约为字体高度的2.5倍到3倍；对于多行显示数据的表格，建议行中内容的最高点与最低点到行框的上下边距略小于文字高度。
（12）分页
- 分页的设计是根据不同的场景进行选择最优的设计方案。在不需要定点跳转的场景，建议采用案例1或者案例2中的第两种设计，删除多于的功能，使页面简洁、清爽。在需要定点跳转的场景，采用案例2中的第一种和第三种设计，能够节约用户的大量时间，且设计相对简单，用户很容易就明白设计意图。
（13）单页条目显示
- 对于单页条目显示的设计，建议采用页面条目显示数量自定义的设计方式，其设计可以丰富数据的对比范围，在特定情况下会方便用户的操作。
（14）其他：如子母表、数据状态、列宽、数据列表待补充。
