表格控件主要用于创建结构化、适合打印的布局。通过可自定义的列和行、单元格合并及高级样式选项,您可以为表单、报告及其他文档设计出专业且精美的表格。不论是简单的网格还是复杂的嵌套布局,表格控件都能确保您的数据清晰呈现,并为完美打印做好优化。
何时使用表格控件
表格控件适用于以下场景:
优化打印的布局:设计用于打印的表格,如表单、发票、报告或其他需要精确对齐和格式化的内容。
结构化数据呈现:用于组织和显示结构化数据,例如时间表、产品清单或对比图表。
复杂表单:创建易于阅读的打印友好型表单,字段整齐排列在行和列中。
专业报告:开发结构清晰的表格以突出显示关键数据点,适合分发用途。
嵌套布局:在单元格内使用嵌套表格,创建多层次、组织有序的设计以用于综合打印材料。
定制打印样式:通过添加边框、内边距和文本对齐,打造专业、精致的外观,专为打印优化。
通过使用表格控件,您可以确保布局在打印质量和功能性方面达到最高标准。
创建表格
您可以从“控件面板”中将表格控件添加到页面中。
默认情况下,表格包含三行三列,列宽为 100px,行高为 70px。这个默认设置为创建整洁结构化的表格布局提供了起点。
注意:
为了创建组织良好且一致的表格结构:
从默认表格配置开始,并根据需要调整行和列。
使用表格的样式选项定义清晰的视觉边界和内容对齐方式。
添加适当的控件,如文本框、图片甚至嵌套表格,提升表格的功能性和设计感。
配置表格控件
添加列和行
配置表格的第一步是通过添加列和行设置其结构:
调整列和行的大小
根据内容需求控制每列和每行的大小:
自定义大小:可在行或列设置中输入自定义大小。默认情况下,列宽为 100px,行高为 70px。您还可以设置宽度为 PX、%、em、rem、vw、vh 或自定义计算值。
最小/最大设置:为行或列定义最小和最大尺寸,在确保一致性的同时提供灵活性。例如,将行的最小高度设置为 200px,最大高度设置为自定义计算值。
外观设置
通过“外观”选项卡,设置动态显示规则,根据用户输入或数据值控制表格的可见性,实现响应式和交互式表格。
表格样式设置
“样式”选项卡提供了丰富的自定义选项,可以创建精致专业的表格外观:
内容内边距:调整内容与单元格边框之间的间距,以确保可读性和对齐。
边框:为整个表格或特定的行、列或单元格自定义边框样式、厚度和颜色。
背景样式:为单个单元格、行、列或整个表格应用背景颜色或图案,提升视觉吸引力。
字体自定义:调整字体大小、粗细和颜色,以匹配文档主题。
悬停效果:为单元格或行添加悬停效果,在交互场景中提供视觉反馈。
对齐选项:
垂直和水平对齐单元格中的文本和内容,保持一致性。
为多元素布局设置分组内容对齐。
单元格间距:调整表格单元格之间的间距,创建整洁均衡的布局。
行和列高亮:使用交替的行或列颜色,提高大数据集的可读性。
表格宽度和高度:定义表格的整体尺寸,以完美适配内容或容器。
自定义CSS:添加高级自定义样式,满足独特的设计需求。
高级设置
单元格合并和拆分
为了创建更复杂的布局:
该功能可以实现灵活的布局设计和空间的高效利用。
向表格添加内容
在表格控件中,您可以添加各种控件以增强其功能性。这些控件包括文本框、图片、画廊控件,甚至嵌套表格。表格中的每个单元格都可以容纳多个元素,使您能够设计出多样化和动态的布局。例如,您可以在一个单元格中同时包含文本和图片,或嵌套表格以创建详细的多层结构。
通过利用这些选项,您可以设计出功能强大且视觉吸引力兼具的表格,并优化用于打印和展示。