UI组件——表格介绍
虽然表格曾经用于创建整个网页布局，但现在它们已恢复到组织数据的正当功能。表格的设计应该围绕着使它包含的数据清晰和有用。
设计表格时要考虑的事项包括行高和列宽、标题样式、是否对较长的表格进行分页或使用其他显示更多数据的方法、表格是否应可排序以及与表格的交互应如何工作.
行高
表格的行高应该便于用户阅读每行包含的信息。共有三种常见尺寸：压缩 (40px)、常规 (48px) 和松弛 (56px)。
压缩行有助于在不滚动的情况下显示数据，尽管它比其他两个行高更难阅读。如果一次查看整个表对表的功能很重要，那么压缩行是有意义的。否则，使用常规或宽松的行高可提供更好的用户体验。
列宽
在行高之后，列宽是表格可读性的另一个关键因素。是的，每列的宽度将取决于其内容的宽度，但可读性仍然是重中之重。确保列的两侧有足够宽的边距，以便用户可以毫不费力地扫描、比较或编辑表格。
标题样式
表格标题——简要描述每列内容的标签——是每个表格的必要组成部分。标题样式应通过已建立的视觉层次将这些标签与表格中的其余文本区分开来，而不会变得压倒性或侵入性。这可以通过对表格标题使用稍深的颜色或粗体文本来完成。
排序
排序功能是任何大表最重要的交互功能之一。如果没有排序选项，处理大型数据集可能是一场噩梦。
行可以按字母或数字顺序升序或降序排序，允许用户以最适合他们需要的任何方式查看数据。
工具栏
工具栏可以为您的表格添加很多功能。它们位于表格上方，通常包含各种功能。您可以在工具栏中包含搜索、导出、打印、过滤和排序选项等内容，从而提高表格数据的整体可用性和实用性。
行悬停状态
当与表中的特定行交互时，显示该交互的可视化指示器可以提高可用性。由于表格的统一外观，用户很容易迷失自己的位置。在您的行中添加行悬停状态可以让用户在尝试比较整行的数据时感到沮丧。
这种状态使用户可以轻松地跟踪他们在表中的位置，这在行可操作时尤其重要。
选定的行
在某些情况下，用户需要在表格中选择行，例如在进行批量编辑时。选定的行应突出显示，以便它们在视觉上分开。简单地在行的一侧添加一个复选标记并不能削减它，因为它很容易被用户忽视。
内联菜单
当您希望用户能够在每一行中进行交互时，包括内联菜单可以为他们提供广泛的可能操作。
将这些操作隐藏在 “更多”（三点）菜单后面可以节省空间，减少视觉混乱，并且可以更轻松地扫描表格数据，而不受按钮或其他操作项的干扰。
请注意，用户在实际开始与表格交互之前可能不会知道内联菜单中的选项。
分页
分页是将表格分成更可用的块的最简单方法。为了减少服务器负载并使用户更容易翻阅内容，请将表格拆分为页面，每页上具有设定的行数。请务必明确用户当前在哪个页面上。
为防止混淆，请在总计数中显示用户在当前页面上查看的行数。
无限滚动
作为分页的替代方案，无限滚动会在用户向下滚动时不断加载更多数据。用户无需点击“下一步”按钮或翻阅多个页面即可加载更多数据。
无限滚动的缺点是它不跟踪页面，因此返回用户已经通过的数据可能很困难。它也不能让用户知道表中存在多少数据，这可能会令人沮丧。
本文内容为转载
