数据表格最佳实践：对齐

[TOC]

缘起

LP 美图晋升答辩，偶尔提起这问题，被领导问到，没清楚如何回答。 后领导提及数据右对齐源于算盘。

而据我所知应是会计学的计算需求，主要考虑计算方便和对位问题，深度根源并不十分清楚。只有处理数据对齐的方法论罢了。

好奇宝宝是不会稀里糊涂的，所以有此文章，大家都不喜欢啰嗦，就简说结论，过程等尽量少说不说，参考里有不少，有兴趣可以看看。

溯源

综合资料，个人认为是从西方的算术 ->计算器 -> 计算机逐步发展而来都是西方舶来品，从真实世界的习惯（方法、效率形成）到技术发展后的迎合用户的习惯，到计算机时代的用户体验考量的真实世界映射。

列算式时（右对齐/分位对齐）：

物理世界的计算器（右对齐）：

Excel 被主要应用于数据、报表处理，它的默认对齐：

综上考虑，个人认为数据表格的对齐及设计规则应为：

数据表内容对齐

1. 首先表头要与数据对齐，有直观的关联。
2. 一定使用等宽字体（最好是无衬线），要么怎么对的齐数字？ 即 1（虽然很苗条）或9（比1胖多了）但每字符占用的空间是相同，从而能上下对齐（通常字体名带 mono 的，东亚语言通常是等宽的）度娘百科：等宽字体

表格内容上的对齐，经过计算机技术的引入和应用，体验优化，现今可你要用的对齐方式如下（根据使用场景灵活应用）：

1. 左对齐

• 文本（视为、用做文本的内容）
• ID 等编号类

2. 右对齐 & 符号对齐

在会计电子表格中，数字（尤其是货币金额）几乎总是右对齐，因为能使数字的“小数点”对齐，并确保数字的每一列都具有相同的数量级，从而变得非常容易快速浏览，心算。从而高效阅读/获取数据。

2.1 右对齐

• 数值、货币、时间等右对齐（分位对齐，个,十,百分位，千分位符……）

• 为了帮助读数据表，可以优化对齐方式，如符号对齐，小数点对齐

2.2 特殊符号对齐（延展） ：

这里是 x k :

css 也提供了字符对齐的支持,MDN Web Docs:text-aligin 中提到：

1
2
3

/* Character-based alignment in a table column */
text-align: ".";
text-align: "." center;

3. 居中对齐

• 居中对齐：如表格内的数据是相同的位数（如都是4个字），或是图示内容。特殊格式也可以根据性质和表格目标灵活调整。

4. 特殊对齐

为了特殊场景做的阅读优化，比如单位换算的列表： 用十分位对齐

在此示例中，数字不与小数点对齐。这是因为该表的目的是让读者轻松识别和提取乘数。在这种情况下，没有比较明显的用例来比较因子的相对大小，而十进制对齐会很有用。

References

1. Why are calculator screen digits right-aligned?
2. What is the best practice for data table cell content alignment
3. Design better data tables
4. Web Typography: Designing Tables to be Read, Not Looked At 墙
5. Guidelines for Aligning Data in Tables for Great Table Usability
6. MDN Web Docs:text-aligin