表格可读性提升分析（2）
作者：一叶千鸟 来源：千鸟志 发布时间：2010-05-19 13:03:00
单元格内容不清晰
主要是单元格内容的展示以及数据属性对可读性的影响。分别阐述了根据数据特性定制显示的四种对齐方式，首先是满足用户需求，其次才是迎合用户的阅读习惯。最后一点，应该注意单元格的内容不留空。
可变长度字符串左对齐，“可变长度”指长度不一定的数据列，比如商品名称。此类情况应该符合用户的视线规律，左对齐排列，也能辅助对比明确各条数据的长短。如下图，表格的Title, Company, Location三个字段数据：
固定长度、较短字符串居中，“固定长度”指长度规格不会变化的数据列，比如日期2009.02.21（补0是数字书写规范）。“较短字符串”指很短也不需逻辑对比的数据列，比如操作链接，或表状态文字，放中间左右留白均等是折中的最好效果。如下图，表格的“报告、状态”两个字段数据：
可比较字符串右对齐，“可比较”指需要关联对比的数据列，基本都指数字的情况，比如钱有十位的￥24.30和百位的￥452.10。注意一点，这里的“可比较”其实也是“可变长度”的，只不过“可比较”是更重要的需求。表格的数据列对比，是各种系统和平台最经常碰到的需求，此点也是最容易被忽视的问题。如下图，表格的数字纵向对比效果：
合并列的单元格顶部对齐，“合并列的单元格”指使用了rowspan这个跨行属性，指需要在水平方向跨多个单元格的需求，复杂表格中一对多的关系。此时已经rowspan的单元格应该定义valign=”top”靠顶，以保证所有数据在第一行能显示完整。因为单元格默认垂直居中，如果是多行的数据表，用户从上往下的阅读开始往往搞不清楚对应的后续数据列内容。如下图，表格的“联系人、状态、价格”三个字段数据：
不留空白，空白单元格容易造成用户困惑甚至误解，用户会搞不清楚到底是没有数据，还是根本没有值？正确做法，没有数据的显示0，给没有值的单元格划线或者打叉。如下图，单元格内划横杠表示不支持：
0
投稿猜你喜欢
前言前面在 BeanShell 里面是通过 java 脚本实现请求的预处理，jmeter里面也可以调用python的脚本，需安装 jytho- 概要本文只是简单的介绍动态规划递归、非递归算法实现案例一题目一:求数组非相邻最大和[题目描述]在一个数组arr中，找出一组不相邻的数字，使得
- 在python 中使用datatime库，可以用来获取现在日期和时间一、datetime库简介datetime有五个类：datetime.d
- 本文实例讲述了Selenium定位元素操作。分享给大家供大家参考，具体如下：Selenium是一个用于Web应用程序测试的工具。Seleni
- 一、mock.js的使用mock.js的使用步骤① 下载依赖 npm install mock -d（开发环境使用）② 引入到main.js
- 模型VGG，数据集cifar。对照这份代码走一遍，大概就知道整个pytorch的运行机制。 来源 定义模型：'''V
- ThinkPHP模板的in标签与range标签用于判断某个模板变量是否在某个范围之内。1.in标签ThinkPHP的in标签用于某个模板变量
- 开始使用MySQL 为关系型数据库(Relational Database Management System)，一个关系型数据库由一个或数
- 你搜索这个，你会发现好多都是np.zeros(5,2)，嗯都是复制的一个国外的帖子，然而没有翻译人家的话。然后你愤怒的关闭页面。这简直就是文
- SELECT SUBSTR (T.RPT_ID, &nb
- 此处收集的是一些夺人心魄的创意广告牌，巧妙的构思十分值得大家观瞻.......超人归来 superman returnsNespressos
- template代码：<template> <div class="hello"> <ul
- 在pytest自动化测试中，如果只是简单的从应用的角度来说，完全可以不去了解pytest中的显示信息的部分以及原理，完全可以通过使用推荐的p
- 调试的定义：通过一定方法，在程序中找到并减少缺陷的数量，从而使其能正常工作。这里说一些如何调试PHP程序的经验。一、PHP自带的调试功能1、
- pytorch geometric的GNN、GCN节点分类# -*- coding: utf-8 -*-import osimport to
- GO类型转换及与C的类型转换类型转换语法dst := float32(src)示例var num int = 520f32 := float
- 今天周五，很闲，坐在电脑前没什么事可做，产品线的人也没提什么新的需求，可能下周会有新的需求和工作安排，但那是下周的事了。今天就想写点技术的东
- http协议是无状态的。下一次去访问一个页面时并不知道上一次对这个页面做了什么。无状态的应用层面的原因是：浏览器和服务器之间的通信都遵守HT
- cos()方法返回x弧度的余弦值。语法以下是cos()方法的语法：cos(x)注意：此函数是无法直接访问的，所以我们需要导入ma
- 对象Python 中，一切皆对象。每个对象由：标识（identity）、类型（type）、value（值）组成。1. 标识用于唯一标识对象，
