动态表

在 WordPress 中构建数据表通常意味着使用 HTML 进行战斗或粘贴无法风格化的短代码。 动态表 小部件在 Elementor 的主插件 elementor面板中添加头列、填写行和样式设置每个部分, 让您可视化地构建一个。没有表标记, 没有插件锁定。

它适合属于网格的任何内容,例如员工目录、规格表、时间表或价格表。您可以合并单元格,向标头添加图标,对行进行条纹处理,并打开手机响应模式。下面是贯穿每个设置的运行,从标头单元格到造型选项卡。

"动态表"小部件的作用 #

Widget 从两个中继器构建一个标准的 HTML 表:一个用于头行,一个用于身体细胞,每个细胞都是自己的项目,所以你无需编写任何代码即可控制文本、对齐,甚至列或行跨度。

它具有三个选项卡:标题、正文和设置的内容、颜色和间距的样式以及通常的 Elementor 选项的高级选项卡。结果是一个干净、响应迅速的表格,与您的主题相匹配。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
• 您想要显示的数据,以列和行的形式勾勒出来。

如何添加动态表小部件 #

在 Elementor 编辑器中,打开 元素 面板和搜索 动态表的,或者滚动到主插件部分。将其拖到您的页面上。它加载了一个示例表,因此您可以从工作布局而不是空网格进行编辑。

设置表头 #

打开 内容 选项卡。 桌子头 部分保存标头行。 桌子头 切换显示或隐藏标头,并且 表标头单元格 中继器每列容纳一项。

每个标头单元格都有自己的内容和选项子选项卡。在 内容 你设置了 列名称 并且可以添加一个 图标 旁(无或图标,来自图标库或上传的SVG)。使用 添加项目 要添加列,请将图标复制到复制一列,然后将 X 删除它。

填写表格正文 #

的 桌体 section 保存单元格,每项都是一个单元格,并且 a 新行? toggle 标记新行开始的位置,因此您可以按顺序添加单元格并标记每行的开始。

每个身体细胞还具有内容和选项子选项卡:

• 身体文字: 单元格内容,带有"使用人工智能写入"选项。
• 列跨度和行跨度: 跨列或跨行合并单元格。
• 自定义宽度: 为该列设置固定宽度。
• 对齐: 左、中、右或在单元格内证明合理。
• 装饰: 应用预设样式使单元格脱颖而出。

要增长表,请单击 添加项目、键入单元格文本,然后打开 新行? 在每个新行的第一个单元格上。这里正在添加第五个员工行。

使表响应式 #

的 设置 部分有一个 响应表? toggle。on,桌子在小屏幕上回流而不是溢出,所以每行都堆叠成手机上可读的卡,这就是人们忘记的设置,也是为什么桌子在移动端看起来坏了。

为桌子设计样式 #

的 风格 tab 分拆成 全球风格, 表页眉样式、和 桌体另外 图案 (专业选项)。 全球风格 部分设置了桌面宽度的外观。

• 条纹表: 打开斑马条纹并选择条纹行颜色。
• 背景颜色: 细胞后面的基色。
• 内细胞填充: 每个单元格内的空间。
• 边界类型和边界半径: 单元格和圆角之间的线。

头部和身体造型 #

的 表页眉样式 section 设置头部的背景、文本颜色、排版和填充, 因此顶行是分开的。The 桌体 部分对数据单元执行相同的操作。

• 背景颜色和文本颜色: 体细胞的颜色。
• 图标尺寸、图标颜色和图标填充: 任何单元格图标的造型。
• 对齐和排版: 正文的坐姿和外观。

页面上的结果 #

发布或预览,表格渲染您的列、行和条纹就位,如果您打开该表,则在移动设备上响应。

常见用例 #

• 员工或团队目录 包含姓名、角色和联系方式。
• 规格表 比较产品功能和价值。
• 时间表和时间表 适用于课程、活动或办公时间。
• 价格表 那不需要满 定价表.
• 数据摘要 从电子表格中拉出到样式网格中。

使用动态表小部件的技巧 #

• 首先规划列。 在填充主体之前设置每个标头单元格,以便行对齐。
• 仅在第一个单元格上标记新行。 标记每行(而不是每个单元格)的开始,或者布局中断。
• 打开手机响应式桌子。 除非打开,否则移动设备上的宽表会溢出。
• 对长桌子使用条纹。 Zebra 行使高数据表更容易扫描。
• 保持单元格文本短。 长字符串拉伸一列,因此使用自定义宽度来保持均匀。

常见问题 #

包裹起来 #

Dynamic Table 小部件将数据的行和列变成一个干净的、有样式的表,无需触摸 HTML 设置您的标头,添加正文单元格,标记每行新行,然后对颜色、条纹和边框进行样式,以匹配您的页面相关数据布局,请参阅 比较表小部件 和 定价表小部件,浏览全文 主插件小部件和扩展并且检查 定价页面 对于每个计划包含的内容。