表格
表格用于直观地显示任意大小的结构化数据。
表格的基本元素是单元格。单元格构成表格的列和行。表格始终包含一个表头。
表格单元格
单元格是表格行和列交叉处的容器，您可以在其中放置其他组件：
单个单元格可以包含单个组件（例如，文本），也可以包含多个组件的组合（例如，复选框、文本和图标）。
如果单元格中没有要显示的数据，则该单元格可以为空。此外，单元格内容在其正常状态下可以隐藏，并在鼠标悬停在单元格或行上时显示。
组件使用建议
- 在一个单元格中不要使用超过三种不同的组件：这会使具有此类单元格的列中的数据更难比较，并降低表格的可读性。在这种情况下，您可以为每个组件描述的属性创建一个单独的列。
- 根据当前任务选择表格中的组件大小。对于纯文本数据，最好使用不带装饰的
text-body-1样式，对于其他元素，请使用M尺寸。 - 我们建议在单元格内使用相同大小的组件，例如，
M尺寸的标签和按钮。
单元格高度和宽度
单元格的大小由其内容大小和单元格内边距决定。
标准单元格高度（单行文本，样式为 text-subheader-1，行高 18px）为 40px。在这种情况下，顶部和底部单元格内边距均为 11px。
对于包含两行文本的单元格，单元格高度为 58px。
您可以使用任意顶部、底部、左侧和右侧内边距，但我们建议使用 4px 的倍数作为内边距系统。顶部和底部内边距通常相同，但您可以使它们不同。左侧和右侧内边距也一样（有关更多详细信息，请参阅表格中行和列的描述）。顶部和底部内边距不必与左侧和右侧内边距相等。
分隔线
每个单元格都有一个 1px 高的水平分隔线。此分隔线与单元格底部对齐，其宽度等于单元格宽度。您可以省略表格最后一行的单元格分隔线。
对齐
单元格内的内容可以左对齐或右对齐（有关文本对齐的更多详细信息，请参阅列描述）。
表格表头
表格表头位于表格顶部，包含列名。除了名称，表头还可以包含复选框和按钮。
避免使用两行列名，以防止换行。当名称换行到第二行及以后时，表头的高度会增加。在这种情况下，其他名称和按钮将保持顶部对齐。
表格列
列是垂直排列的单元格组。根据单元格中内容的类型，列中的数据可以：
- 排序
- 右对齐
排序
如果列中的数据可以排序（例如，按字母顺序、按时间或按大小），则在列名旁边会放置一个箭头图标。当用户单击图标名称时，行将按此列进行排序。
排序是表格的可选功能。它在特定用例中可用。
您不能同时按两列对表格进行排序。
通常，如果列中的数据可以排序，则此类数据应具有相同的测量单位。为避免在每个列单元格中指定单位，请在列名后添加逗号并加上单位。
右对齐内容
此功能仅适用于文本数据，用于比较数据（例如，花费的时间或消耗的资源）。此类数据通常具有相同的单位，并且可以进行排序。对于带有排序箭头的右对齐列数据，请先放置箭头，然后是文本。
滚动时锁定列
如果表格超出屏幕边界，将出现水平滚动条。在这种情况下，您可以锁定某些表格列，使其始终显示在屏幕上。您可以锁定表格的第一列或最后一列。您可以使用任意数量的锁定列，但要确保有足够的空间用于滚动列，并考虑最低支持的视口宽度。
锁定后，这些列单元格将获得一个额外的分隔线：如果列是左锁定的，则分隔线位于右侧；如果列是右锁定的，则分隔线位于左侧。此分隔线将限制其他单元格的滚动。
在最右侧的列中，您可以为行添加操作。这些操作可以通过一个三点图标访问，该图标会展开成一个列表。在滚动时锁定此列，以便用户始终可以访问操作。在具有此类列的表头中放置一个齿轮图标，单击该图标将打开表格列配置。
列设置
用户可以自定义列的数量和顺序。为此，请在最后一列的表头中添加一个齿轮图标。当用户单击齿轮图标时，将出现一个设置弹出窗口。
表格行
行是水平排列的单元格组。
可点击行
当用户单击表格行时，他们可能会被定向到另一个页面、一个模态窗口或一个侧边栏。当鼠标悬停在这些行上时，背景颜色会变为 --g-color-base-simple-hover。
为了在鼠标悬停在可点击表格行时获得更整洁的显示效果，您可以在左右两侧添加小的边距。有了这些边距，内容就不再与网格对齐。因此，在没有悬停效果的情况下，我们不建议使用这些边距。
具有批量操作的行
您可以在第一列包含复选框的行上应用批量操作。一组组操作通常与单个表格行的单个操作集相匹配。
如果一行被选中，其背景颜色将变为 --g-color-base-selection，并且页面底部会出现一个带有组操作列表的操作栏。
如果不同的表格行有不同的可用操作，我们建议仅在操作栏中显示所有选定行都可用的操作。其他行为可以由设计者自行决定。
内容对齐
对于单元格高度大于 40px 的行，内容可以顶部对齐或居中对齐。
顶部对齐更可取，因为它提高了数据可读性。在这种情况下，所有包含文本的组件都应与第一行对齐。
如果顶部对齐的行包含图标、用户头像、图标按钮、复选框、进度条和其他非文本元素，请设置它们的顶部内边距，使其水平轴与单行单元格中的文本轴对齐。
当难以微调一行中所有类型内容的顶部单元格边距，或者对齐不影响内容可读性时，您可以使用居中对齐。
使用建议
使用表格：
- 用于组织描述对象属性的大量同类数据。
- 用于对页面上的数据进行排序和比较。
- 通过排序、过滤和扫描表格内容来快速查找值。
我们不建议：
以下是设计指南源文件的中文翻译：
-
使用列表而非表格来描述具有单一属性的对象。 在这种情况下，列表是更好的选择。 例如，您应该使用列表来展示颜色名称及其 HEX 编码信息。
-
使用表格来描述具有不同异构属性的对象。 在这种情况下，最好单独描述每个对象。 例如，假设您的任务是描述员工使用的设备。这些设备可能包括笔记本电脑（属性：操作系统、存储容量、屏幕尺寸）、电脑鼠标（属性：有线或无线）以及台灯（属性：制造商、安装类型）。请勿将所有这些数据添加到一个表格中，并尝试提出不同的可视化方法。