WordPress 中建立数据表通常意味着与 HTML 战斗或粘贴你无法风格化的短代码。免费 动态表小部件 在 Elementor 的主插件 elementor面板中添加头列、填写行和样式设置每个部分, 让您可视化地构建一个。没有表标记, 没有插件锁定。
它适合属于网格的任何内容,例如员工目录、规格表、时间表或价格表。您可以合并单元格,向标头添加图标,对行进行条纹处理,并打开手机响应模式。下面是贯穿每个设置的运行,从标头单元格到造型选项卡。
"动态表"小部件的作用 #
Widget 从两个中继器构建一个标准的 HTML 表:一个用于头行,一个用于身体细胞,每个细胞都是自己的项目,所以你无需编写任何代码即可控制文本、对齐,甚至列或行跨度。
它具有三个选项卡:标题、正文和设置的内容、颜色和间距的样式以及通常的 Elementor 选项的高级选项卡。结果是一个干净、响应迅速的表格,与您的主题相匹配。
在开始之前 #
- 文字出版社 与 元素 已安装并处于活动状态。
- Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
- 您想要显示的数据,以列和行的形式勾勒出来。
如何添加动态表小部件 #
在 Elementor 编辑器中,打开 元素 面板和搜索 动态表的,或者滚动到主插件部分。将其拖到您的页面上。它加载了一个示例表,因此您可以从工作布局而不是空网格进行编辑。
设置表头 #
打开 内容 选项卡。 桌子头 部分保存标头行。 桌子头 切换显示或隐藏标头,并且 表标头单元格 中继器每列容纳一项。
每个标头单元格都有自己的内容和选项子选项卡。在 内容 你设置了 列名称 并且可以添加一个 图标 或者一个 图像 旁(类型:无、图标或图像)。使用 添加项目 要添加列,请将图标复制到复制一列,然后将 X 删除它。
填写表格正文 #
的 桌体 section 保存单元格,每项都是一个单元格,并且 a 新行? toggle 标记新行开始的位置,因此您可以按顺序添加单元格并标记每行的开始。
每个身体细胞还具有内容和选项子选项卡:
- 身体文字: cell 内容,它也接受动态标签,每个标签填充一个单元格。
- 列跨度和行跨度: 跨列或跨行合并单元格。
- 自定义宽度: 为该列设置固定宽度。
- 对齐: 左、中、右或在单元格内证明合理。
- 装饰: 单元格文本的下划线、上划线或直线。
要增长表,请单击 添加项目、键入单元格文本,然后打开 新行? 在每个新行的第一个单元格上。这里正在添加第五个员工行。
使表响应式 #
的 设置 部分有一个 响应表? toggle。on,桌子在小屏幕上回流而不是溢出,所以每行在宽度高达768px的设备上堆叠成可读卡,列名显示为标签,这就是人们忘记的设置,也是为什么桌子在移动设备上看起来坏了。
为桌子设计样式 #
的 风格 tab 分拆成 全球风格, 表页眉样式、和 桌体另外 图案 (专业选项)。 全球风格 部分设置了桌面宽度的外观。
- 条纹表: 打开斑马条纹并选择条纹行颜色。
- 背景颜色: 细胞后面的基色。
- 内细胞填充: 每个单元格内的空间。
- 边界类型和边界半径: 单元格和圆角之间的线。
头部和身体造型 #
的 表页眉样式 section 设置头部的背景、文本颜色、排版和填充, 因此顶行是分开的。The 桌体 部分对数据单元执行相同的操作。
- 背景颜色和文本颜色: 体细胞的颜色。
- 图标尺寸、图标颜色和图标填充: 任何单元格图标的造型。
- 对齐和排版: 正文的坐姿和外观。
页面上的结果 #
发布或预览,表格渲染您的列、行和条纹就位,如果您打开该表,则在移动设备上响应。
常见用例 #
- 员工或团队目录 包含姓名、角色和联系方式。
- 规格表 比较产品功能和价值。
- 时间表和时间表 适用于课程、活动或办公时间。
- 价格表 那不需要满 定价表.
- 数据摘要 从电子表格中拉出到样式网格中。
使用动态表小部件的技巧 #
- 首先规划列。 在填充主体之前设置每个标头单元格,以便行对齐。
- 仅在第一个单元格上标记新行。 标记每行(而不是每个单元格)的开始,或者布局中断。
- 打开手机响应式桌子。 除非打开,否则移动设备上的宽表会溢出。
- 对长桌子使用条纹。 Zebra 行使高数据表更容易扫描。
- 保持单元格文本短。 长字符串拉伸一列,因此使用自定义宽度来保持均匀。
常见问题 #
Master Addons 中的动态表小部件是什么?
Elementor小部件,可视化构建HTML数据表,你通过中继器添加头列和体单元格,然后从面板中对颜色、填充、边框和条纹进行样式设计,不涉及HTML或短代码,可以使表响应式。
我可以合并动态表中的单元格吗?
是每个身体细胞在其选项子选项卡中都有列跨度和行跨度选项设置跨度,将该细胞跨多个列或行合并,这对于表内的分组标题或汇总行非常有用。
动态表在移动设备上响应灵敏吗?
是设置部分有一个响应式表切换,打开后,表会在小屏幕上回流,因此每行都堆叠成可读块,而不是溢出页面,这使得宽表在手机上可用。
我可以在表中添加条纹行吗?
是。样式选项卡中,全局样式部分有一个条纹表切换和条纹背景颜色。打开它可以添加斑马条纹,这会交替行色,使长表更容易阅读。
我可以在表头添加图标吗?
是每个头单元格都有一个类型选项,其中没有,图标或图像选择图标从图标库中选择一个,或者图像上传图片图标显示在列名旁边,这有助于标记列,如电子邮件,电话或位置一目了然。
我可以对动态表中的 CSV 进行排序、搜索或导入吗?
No。widget 没有排序、搜索、分页或 CSV 导入,对于那些,使用数据表插件如 TablePress,将其短代码放在页面上。
包裹起来 #
的 动态表小部件 将数据的行和列变成一个干净的、有样式的表格,无需触摸 HTML 设置您的标头、添加正文单元格、标记每个新行,然后对颜色、条纹和边框进行样式设计以匹配您的页面。有关数据布局,请参阅 比较表小部件 (专业版)和 定价表小部件,浏览全文 主插件小部件和扩展并且检查 定价页面 对于每个计划包含的内容。
