设计表格以便阅读,而非观赏

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费额度!

Richard Rutter 为了支持他的新书 Web Typography,分享了大量关于数据表格设计的优秀建议。 以下是一个很好的建议

您可能会考虑将所有列设置为相同的宽度。 这对内容的可读性没有任何帮助。 一些表格单元格会太宽,导致数据丢失并与相邻单元格分离。 其他表格单元格会太窄,使数据显得拥挤和不舒服。 表格列的尺寸应根据其包含的数据进行调整。

我很高兴再次被提醒了对齐带小数的数字的可能性

td { text-align: "." center; }

但据我所知,对它的支持几乎不存在。 另一个技巧,使用 font-variant-numeric: lining-nums tabular-nums; 确实得到了一些支持

表格可以很漂亮,但它们不是艺术品。 不要对其进行绘画和装饰,而是要为读者设计表格。

直接链接 →