网页表格设计模式

陈慧静已经解决了大量的表格设计模式，这些模式在创建易于阅读且对网页响应的表格时可能很有用。

存在着无数的表格设计模式，您选择哪种方法很大程度上取决于您拥有的数据类型以及该数据的目标受众。归根结底，表格是一种组织和呈现数据的方法。重要的是要弄清楚哪些信息对您的用户最重要，并决定最适合他们需求的方法。

这让我想起 Chris 很久以前写的关于 响应式数据表格 的内容，以及它们有多难做到正确。此外，Richard Rutter 在一篇类似的文章中写了关于 表格的可读性 和精美的排版。

许多表格，例如财务报表或时间表，主要由数字组成。一般来说，它们的目的是为读者提供以列或行形式呈现的数字数据，有时也以两者组成的矩阵形式呈现。您的读者可以通过扫描列来使用表格，无论是搜索数据点还是比较数字。您的读者也可以通过简单地浏览列或行来理解数据。如果个位数、十位数和百位数都垂直对齐，则比较数字要容易得多；也就是说，所有数字都应该占据相同的宽度。

我最喜欢的表格模式之一，我现在一直使用它，是带有粘性标题的模式。像这里这个演示一样

查看 Pen
表格粘性标题 由 Robin Rendle (@robinrendle)
在 CodePen 上。

作为用户，我发现当我在包含复杂信息的巨大数据表格中滚动时，我往往会忘记一列是关于什么的，然后我必须一直滚动回到顶部才能阅读列标题。

无论如何，所有这一切让我觉得我会读一本关于 <table> 元素以及如何准确且响应式地设计数据的整本书。

直接链接 →