表格可读性提升分析
作者：一叶千鸟 来源：千鸟志 发布时间：2010-05-19 13:03:00
表格(Table)可读性提升的系统总结，包括“行列组织关系模糊、单元格内容不清晰”两大方面...
前边写了个大框架，好像有点笼统，因为没有各点的图文分析。最近用表格比较多，本文具体对表格可读性的提升做个系统总结，顺便把Readability Framework更新到了v1.1。如下图：
追溯表格(Table)的历史，最早设计师们喜欢用表格来布局，因为可视化简单直观，从而大大降低了web design的技术难度。在错误理解表格的基础上，不仅用错，而且模糊了表格的真正用途。到后来web standards改革，某些不实观点又把表格打入冷宫，认为<table>是罪恶之源。
实际上，用户会有各种复杂或简单的多维度大数据量内容展示需求，为了更好的对比分析因此才用到表格（比如Excel），因为表格可以让内容能更清晰易读。比如，在记事本上用Tab也可以排出具有良好可读性的“序列”效果，但毕竟不是直观且有语义的组织模式，因此我认为表格就是为可读性而生的。
表格是web上最常用的内容表现形式，所以多年来，关于表格的设计和代码一直是考验web designer基础的经典题目。在表现层如何让表格传达更好，考验视觉传达设计的功力；在语义层如何让表格结构更灵活，考验结构表现结合的功力。二者相辅相成，共同影响表格在表现层的可读性。那么哪些因素会影响表格的传达？应该如何做具体的传达提升？看下文例子。
行列组织关系模糊
主要关于单元格之间的关系问题对可读性的影响。通过辅助手段可以让信息呈现更好的差异化，或突出更重要的信息。从需求角度再次印证，HTML结构代码与表现效果紧密相关，语义化表格是我们进一步提升用户体验的核心基础。
表头表尾和表体明显区分，表头是<thead>，表尾是<tfoot>，表体是<tbody>，三个结构性代码组合使用。其目地是为了更好的用样式表控制视觉表现，以起到明显区分的作用（通常表头、表尾的效果一致）。区分了表头和表尾更容易控制，某些浏览器直接支持只滚动表身。如下图，表头表尾与表体的层次区分明显，截图有裁切：
用边框分隔单元格，使用定义{border-collapse}来合并边框，早期CSS不受重视的年代，做1像素细线表格还是挺不容易的事。给单元格加上边框后，可以更清晰的表达数据，并且不易看岔行。但是得注意，表格的边框颜色不能过于抢眼，否则看起来会很糟糕。如下图，1像素灰色边框表格和黑色文字的对比：
间行换色，其实与“用边框分隔单元格”是解决同一类问题，间行换色更适用于表格过宽的需求，一定程度上能加强避免读错。同样，间行换色的两种颜色不能反差过大，否则看来太“跳跃”。另外，间行换色也常与1像素边框同时使用，如果不定义边框颜色，此时的1像素边框是背景色的间隙效果。如下图，1像素表格的表体区域有不太明显的间行换色效果：
间列换色，也叫隔行换色，使用<colgroup> & <col>组合标签对列进行格式化，等于是间行换色的“垂直”版本，可以更强化列与列之间的差异。虽然看起来用处有限，但往往在应对实际需求时，就是这样的简单改动可以避免使用JS再开发。如下图，分别给不同列指定背景色：
重要数据列强调，同样使用<colgroup> & <col>来控制，可以任意指定数据列强调显示，表示当前的操作结果。如下图，表格的Visits字段，表示目前正在降序排列：
0
投稿猜你喜欢
- 本文实例讲述了Python获取基金网站网页内容、使用BeautifulSoup库分析html操作。分享给大家供大家参考，具体如下：利用 ur
本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理以下文章来源于菜J学Py- 网上有很多提供在线按钮制作、文字标题制作、Logo制作服务的网站，它们可以非常方便了让大家轻松的获得效果出色的各类图标型的图片，下面就快来看
- 声音的本质是震动，震动的本质是位移关于时间的函数，波形文件(.wav)中记录了不同采样时刻的位移。通过傅里叶变换，可以将时间域的声音函数分解
- 反馈说在选择时间时会出现遮挡选择器的情况，阻碍操作 如下图1，需要修改xadmin 文件 ，在widgets.py --->第28行添
- 二次移动平均法逻辑二次移动平均法是一种重要的数学工具，用于处理时间序列数据，它的主要目的是通过平滑序列中的噪音数据来更好地捕捉趋势。具体实现
- 本文以简单示例分析了python中关键字is与 ==的区别，供大家参考一下。首先说明一下Python学习中几个相关的小知识点。Python中
- 前言这篇主要整理pandas常用的基本函数，主要分为五部分：汇总函数特征统计函数唯一值函数替换函数排序函数1、汇总函数常用的主要是4个：ta
- 原来的程序是使用sqlite这个嵌入式数据库作为Remit(code name)的数据源的,因为NHibernate支持这个,然而有一点不好
- 本文实例讲述了MySQL关于字符串中数字排序的问题。分享给大家供大家参考，具体如下：MySQL字符串相信大家都不陌生，在MySQL字符串排序
- 记录应用程序的操作日志可以使用数据库、文本文件、XML文件等。我这里介绍的是使用 XML 文件记录操作日志。我觉得使用 XML 记录操作日志
- 具体解决方案如下： 一、IE和FF下document.body对象的clientHeight，offsetHeight，scrollHeig
- 在使用列表、数组和矩阵的过程中，经常需要相互转换。特此总结相互间转换的过程及结果，供大家参考。第三方包：numpy
- 热的东西显然会变凉。房间会会人沮丧地变得凌乱。几乎同样，消息会失真。逆转这些情况的短期策略分别是重新加热、 做卫生和使用 Hop
- 用Python+ChatGPT批量生成论文概述做算法研究离不开阅读大量论文。从海量论文中找到需要的论文往往耗费算法团队不少的精力。ChatG
- 一般来说，使用线程有两种模式, 一种是创建线程要执行的函数, 把这个函数传递进Thread对象里，让它来执行. 另一种是直接从Thread继
- 环境：python3.6 pyqt5只是简单的一个思路，请忽略脆弱的异常防护：# -*- coding: utf-8 -*-import s
- 从cmd进入python的方法如下1进入python打开cmd——>直接输入python即可，如下2退出python方法一：先按Ctr
- 如果您刚刚开始学习PHP，可能有许多函数需要研究，今天我们就来学习一下PHP Header()的使用方法，更多的使用说明，请您参照PHP中文
- 一、软件下载MySQL下载安装：官网下载地址：https://www.mysql.com/或者本地下载二、安装须知如果是安装过该软件的卸载重
