跳转到主要内容
表格控件

添加具有可自定义列和行的表格。合并单元格、调整样式,并创建结构良好的布局,以实现精美的打印输出。

超过 4 个月前更新

表格控件主要用于创建结构化、适合打印的布局。通过可自定义的列和行、单元格合并及高级样式选项,您可以为表单、报告及其他文档设计出专业且精美的表格。不论是简单的网格还是复杂的嵌套布局,表格控件都能确保您的数据清晰呈现,并为完美打印做好优化

何时使用表格控件

表格控件适用于以下场景:

  • 优化打印的布局:设计用于打印的表格,如表单、发票、报告或其他需要精确对齐和格式化的内容。

  • 结构化数据呈现:用于组织和显示结构化数据,例如时间表、产品清单或对比图表。

  • 复杂表单:创建易于阅读的打印友好型表单,字段整齐排列在行和列中。

  • 专业报告:开发结构清晰的表格以突出显示关键数据点,适合分发用途。

  • 嵌套布局:在单元格内使用嵌套表格,创建多层次、组织有序的设计以用于综合打印材料。

  • 定制打印样式:通过添加边框、内边距和文本对齐,打造专业、精致的外观,专为打印优化。

通过使用表格控件,您可以确保布局在打印质量和功能性方面达到最高标准。


创建表格

您可以从“控件面板”中将表格控件添加到页面中。

默认情况下,表格包含三行三列,列宽为 100px,行高为 70px。这个默认设置为创建整洁结构化的表格布局提供了起点。

注意:

为了创建组织良好且一致的表格结构:

  1. 从默认表格配置开始,并根据需要调整行和列。

  2. 使用表格的样式选项定义清晰的视觉边界和内容对齐方式。

  3. 添加适当的控件,如文本框、图片甚至嵌套表格,提升表格的功能性和设计感。


配置表格控件

添加列和行

配置表格的第一步是通过添加列和行设置其结构:

  • 添加列和行:进入表格设置部分,点击“+添加”按钮插入新列或行。

  • 删除:点击“删除”按钮快速移除列或行。


调整列和行的大小

根据内容需求控制每列和每行的大小:

  • 自定义大小:可在行或列设置中输入自定义大小。默认情况下,列宽为 100px,行高为 70px。您还可以设置宽度为 PX、%、em、rem、vw、vh 或自定义计算值。

  • 最小/最大设置:为行或列定义最小和最大尺寸,在确保一致性的同时提供灵活性。例如,将行的最小高度设置为 200px,最大高度设置为自定义计算值。


外观设置

通过“外观”选项卡,设置动态显示规则,根据用户输入或数据值控制表格的可见性,实现响应式和交互式表格。


表格样式设置

“样式”选项卡提供了丰富的自定义选项,可以创建精致专业的表格外观:

  • 内容内边距:调整内容与单元格边框之间的间距,以确保可读性和对齐。

  • 边框:为整个表格或特定的行、列或单元格自定义边框样式、厚度和颜色。

  • 背景样式:为单个单元格、行、列或整个表格应用背景颜色或图案,提升视觉吸引力。

  • 字体自定义:调整字体大小、粗细和颜色,以匹配文档主题。

  • 悬停效果:为单元格或行添加悬停效果,在交互场景中提供视觉反馈。

  • 对齐选项

    • 垂直和水平对齐单元格中的文本和内容,保持一致性。

    • 为多元素布局设置分组内容对齐。

  • 单元格间距:调整表格单元格之间的间距,创建整洁均衡的布局。

  • 行和列高亮:使用交替的行或列颜色,提高大数据集的可读性。

  • 表格宽度和高度:定义表格的整体尺寸,以完美适配内容或容器。

  • 自定义CSS:添加高级自定义样式,满足独特的设计需求。


高级设置

单元格合并和拆分

为了创建更复杂的布局:

  • 合并单元格:选择两个或多个相邻单元格,点击“合并单元格”按钮,将其合并为一个单元格。

  • 拆分单元格:选择一个已合并的单元格,点击“拆分单元格”按钮,将其还原为独立单元格。

该功能可以实现灵活的布局设计和空间的高效利用。


向表格添加内容

在表格控件中,您可以添加各种控件以增强其功能性。这些控件包括文本框、图片、画廊控件,甚至嵌套表格。表格中的每个单元格都可以容纳多个元素,使您能够设计出多样化和动态的布局。例如,您可以在一个单元格中同时包含文本和图片,或嵌套表格以创建详细的多层结构。

通过利用这些选项,您可以设计出功能强大且视觉吸引力兼具的表格,并优化用于打印和展示。

这是否解答了您的问题?