在面板中构建行和列
该表来自两个中继器。 表标头单元格 每列持有一项,并且 表体细胞 按读取顺序保存每个单元格,其中 a 新行? switch 启动下一行,您可以拖动项目重新排序,复制单元格,或者隐藏带有 的头行 桌子头 开关。
- 合并单元格: 列"跨越在头和身体细胞上,行"跨越在身体细胞上。
- 柱宽: 在单元格的"选项"选项卡中打开"自定义宽度"以设置其宽度。
- 每个单元格的文本选项: 线(左,中,右或正当)和装饰(下划线,上划线或线通过)。
头部和身体造型
表页眉样式 设置标头背景(默认情况下为深色海军蓝)、文本颜色、图标大小和颜色、对齐方式、排版和内单元格填充。 桌体 对数据单元具有相同的控件,以及图标周围的填充。
- 标头: 背景、文本和图标颜色、图标大小、对齐方式、排版和单元格填充。
- 体: 背景、文本和图标颜色、图标大小和填充、对齐、排版和单元格填充。
- 每个设备对齐: 平板电脑和移动设备上的标头和身体对齐方式可能会发生变化。
单元格中的文本、图标、图像和动态标签
每个头和身体细胞都有一个 类型 option: 无,图标或图像 图标来自元素器图标库,图像得到一个像素的图像大小 文本字段接受动态标签,包括来自免费 动态标签 extension,所以一个单元格可以显示一个帖子标题、一个自定义字段或作者详细信息,每个标签填充一个单元格,小部件不会循环通过帖子为你构建行。
- 图标作为复选标记: 在计划或功能比较中使用勾号或十字图标。
- 小图像: 在名称旁边添加照片或徽标,尺寸以像素为单位。
- 动态标签: 拉单个值,例如帖子标题或自定义字段。
全球风格:条纹、边框和角落
全球风格 适用于整个表格。 条纹桌? 默认情况下使用浅灰色 (#eee) 条纹颜色,您可以更改。您还设置了表格背景颜色、内单元格填充、带类型、宽度和颜色的边框以及圆角的边框半径。
- 斑马行: 长桌子上保持条纹,以便易于遵循行。
- 边界: 细胞周围有实线、虚线、虚线或双线。
- 圆角: 边框半径软化了桌子的边缘。
HTML 表代码与动态表小部件
Elementor中没有表小部件,通常添加表的方法就是在HTML小部件中自己编写HTML,下面是与小部件的比较。
| 特点 | HTML 小部件与您自己的代码 | 主插件动态表 |
|---|---|---|
| 价格 | 免(元素核心) | 免费的 |
| 建造行和列 | 写入表、tr 和 td 标签 | 面板中的中继器项目 |
| 造型 | 您自己的 CSS | 样式选项卡控件 |
| 合并的细胞 | colspan 和 rowspan 属性 | 列跨度和行跨度字段 |
| 细胞中的图标和图像 | 粘贴标记 | 图标库或媒体库 |
| 动态标签 | 否 | 是的,每个单元格一个值 |
| 电话布局 | 您自己的媒体查询 | 行堆叠成卡片 |
| 排序、搜索、CSV导入 | 需要脚本或插件 | 否 |
如果您需要排序、搜索、分页或 CSV 导入,TablePress 等专用表插件是更好的选择。对于您在 Elementor 内编辑的样式表,该小部件可以保存您编写 HTML 和 CSS。
如何在 Elementor 中制作表格
在 Elementor 面板中,小部件称为动态表。
- 安装 Elementor 的主插件并检查它 动态表 在主插件小部件设置中打开。
- 使用 Elementor 编辑您的页面,搜索 动态表 zai拖进去,它以一个样本四列表开头。
- 在 桌子头,加一 表标头单元格 每列并键入每列 列名称.
- 在 桌体zuo到右,每格加一项,打开 新行? 在第一个之后的每一行的第一个单元格上。
- 用 列跨度 或 行跨度 "单元格的选项"选项卡中合并单元格。
- "样式"选项卡中为表格样式并离开 响应表? 在手机上堆叠行,然后更新页面。
动态表常见问题
Elementor 中有表小部件吗?
Elementor 本身中没有,免费或 Pro。Master Addons 免费添加一个:动态表小部件从面板中的标头和主体单元构建表。
表在移动设备上是否响应?
是的,使用 Responsive Table? 打开,这是默认值。在宽度高达 768px 的设备上,每行堆叠成一张卡片,每个单元格都显示其列名作为标签。将其关闭以保持手机上的正常表格布局。
我可以在单元格中使用动态数据吗?
是的,每个单元格一个值。标头和正文接受动态标签,包括帖子标题、自定义字段和作者信息等免费主插件动态标签。该小部件不会为每个帖子创建一行,因此每一行仍然由手工构建。
![Master Addons 元素的帖子/页面复制器扩展:WordPress 页面列表中的 MA 复制器行链接创建着陆页 - [Duplicated #128] 草案](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
