如何在 Elementor 中创建表(4 种方法,带步骤)

主要外卖

• Elementor 在核心插件或 Elementor Pro 中没有表小部件,因此 Elementor 中的表来自 HTML 代码、容器、表插件或插件。
• HTML 小部件是在 Elementor 中创建没有插件的表的方法:粘贴表、tr、th 和 td 标签,并为边框和填充添加一个简短的样式块。
• Grid容器可以模仿一个表,但一个3列4行表需要12个单独的文本编辑器小部件,结果不是真正的HTML表。
• TablePress 3.4 添加了自己的 Elementor 小部件,称为 TablePress 表,访问者可以对其表进行排序、搜索和分页。
• Master Addons 动态表小部件从 Elementor 面板中的标头和正文单元格构建一个真实的 HTML 表,并将行堆叠到宽度高达 768px 的设备上的卡中。

Elementor 中创建一个表,你需要一个解决方法,因为 Elementor 不会寄送一个表小部件,工作的四个是 HTML 小部件,它有你自己的代码,一个网格容器,一个 TablePress 表,以及一个附加小部件,比如 动态表.

Elementor 4.3上构建了四种方式中的每一种表,并在桌面和手机上查看了每一种。

Elementor 有表小部件吗?

号元素者面板中搜索“table”且内置结果只有目录和价格表,且均属于元素者Pro,两者都不做行列数据,价格表为单一定价卡,目录列出页面上的标题。

您应该使用哪种方式?

选择表格有多大以及稍后由谁编辑。

方法 1:使用 HTML 小部件在 Elementor 中创建表

Elementor中不带插件制作表格的方法,你写一个简单的HTML表格,Elementor按原样打印。

1. 使用 Elementor 编辑页面并拖动 超文本标记语言 小部件放入容器中。
2. 将下面的代码粘贴到 HTML 代码 场。
3. 标签之间更改文本。每个 tr 是一行,每行 th 是一个标头单元,每个 td 是一个身体细胞。
4. 单击 发表.

<table class="simple-table">
  <thead>
    <tr><th>Plan</th><th>Storage</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>Starter</td><td>10 GB</td><td>$5 a month</td></tr>
    <tr><td>Team</td><td>100 GB</td><td>$15 a month</td></tr>
    <tr><td>Business</td><td>1 TB</td><td>$45 a month</td></tr>
  </tbody>
</table>

<style>
.simple-table { width: 100%; border-collapse: collapse; }
.simple-table th, .simple-table td { padding: 12px 16px; border: 1px solid #e4e7ec; text-align: left; }
.simple-table th { background: #101223; color: #fff; }
.simple-table tbody tr:nth-child(even) { background: #f6f6f7; }
</style>

桌子很轻,而且是真实的 table element,搜索引擎和屏幕阅读器都了解。维护起来比较困难,不过。想要添加一行的客户端必须编辑html,缺少的关闭标签会破坏布局。

方法 2:用网格容器构建表

Grid容器将小部件按行和列放置,因此它可以看起来像一个表,它适合一个小块,其中单元格包含按钮,图标或图像。

1. 添加容器并设置 容器布局 到 网格.
2. 套 列 到您需要的列数和 行 到行数,包括标头。
3. 套 差距 到 0,这样细胞就会接触。
4. 拖一 文本编辑器 widget 输入每个单元格并键入其文本。
5. 在每个小部件上打开 高级的,然后加 填充 还有一个 1px 边境。给头单元格一个背景颜色。

Widget count增长快,三列四行已经需要12个widget,一个5乘10的表需要50,borders双上,除非你调每边,否则单元格相遇的地方输出是一组div,所以屏幕阅读器不会宣布为表,保留这个方法为少数单元格。

方法 3:将 TablePress 表添加到 Elementor

TablePress是一个有超过60万次活跃安装的表格插件,你在自己的admin屏幕上构建表格,然后将其放在Elementor中,它是长表的正确选择,因为它导入Excel、CSV、HTML和JSON文件,并让访问者通过行进行排序、搜索和页面。

1. 安装并激活 桌面压机.
2. 去 桌面压机那么 添加新 键入表,或者 进口 上传文件。
3. 保存表格并注明其 ID。
4. 使用 Elementor 编辑您的页面并搜索 表按压表。拖动小部件并在 中选择表 表格 下拉。
5. 如果您更喜欢短代码,请拖入 短代码 小部件并输入 [table id=1 /] 有你自己的身份证。

Widget 没有 Style 选项卡,因此颜色和字体来自 TablePress 设置和您自己的 CSS。在我们的 390px 测试手机上,五列表也从右边缘跑过,直到我们打开 水平滚动 在表的设置中。

方法 4:使用表小部件

Elementor内部保留整个作业,您在面板中键入单元格并在样式选项卡中为表进行样式,就像您处理任何其他小部件一样,我们将在此处使用来自Master Addons的动态表小部件。

1. 安装主插件并检查它 动态表 在其小部件设置中打开。
2. 使用 Elementor 编辑页面,搜索 动态表 zai拖进去,它以一个样本四列表开头。
3. 打开 桌子头.增加一个 表标头单元格 每列并键入每列 列名称.
4. 打开 桌体.增加一个 表体细胞 每个单元格,从左到右。打开 新行? 在第一个之后的每一行的第一个单元格上。
5. 要合并单元格,请打开单元格 选项 选项卡并设置 列跨度 或 行跨度.
6. 样式为头部、身体和条纹 风格 tab,然后发布。

每个单元格可以保存文本、图标或图像,文本字段接受动态标签。 响应表? 在设置部分默认打开,因此在宽度高达768px的设备上,每一行都变成一张以列名作为标签的卡片。

想在安装任何东西之前先看看它吗? 的 动态表页面 您可以打开三张现场桌子和八种演示布局。

Dynamic Table不排序、搜索、分页或导入文件,每个单元格都是手工键入的,30个单元格就可以,300个单元格很累,所以对于大数据集要回到Way 3。

避免错误

• 在文本编辑器小部件中构建表。 它没有表格按钮,因此无论如何您最终都会在其文本选项卡中编写 HTML。HTML 小部件是该代码的更干净的位置。
• 使用定价小部件获取数据。 价格表和 定价表 widgets是用购买按钮为计划构建的,它们是排数据的错误形状。
• 忘记手机。 5列的表格很少适合390px的屏幕,决定行应该堆叠,横向滚动还是丢失一列。
• 从小部件构建 50 个单元格。 如果网格方法需要大约十几个小部件,请切换到真实的表。

常见问题

最后的想法

Elementor 中创建表格有四种方法,使用 HTML 小部件用于一个小表格且无插件,使用 Grid 容器用于几个带有按钮或图像的单元格,使用 TablePress 用于长数据或导入数据,以及当您想要编辑和样式 Elementor 内部表格时使用表格小部件。

如果最后一个合适, 动态表 是的一部分 主插件 以及其他小部件。

相关阅读

• Elementor 定价表提示
• WordPress 的最佳目录插件