所有现代网站都设计为能够在各种屏幕宽度上正常运行。过去,表格是使用纯 HTML 创建的。随着灵活的网页设计已成为新标准,基本的 HTML 表格已难以满足现代网站的需求。由于简单的 HTML 表格不具有响应性,因此其中包含的文本在移动屏幕尺寸上极难阅读,这就是为什么它们被用来开发响应式表格,根据正在查看的屏幕尺寸调整其布局, HTML 和 CSS 媒体查询必须相互结合使用。
可以使用所有屏幕尺寸上的可读布局来构建表格,以获取不太庞大或多样化的一组信息,并且这可以通过基本的 HTML 和 CSS 方法来完成。但是,如果表格要保存大量数据,那么在移动设备或宽度小于 786 像素的屏幕上构建可读布局并不容易。
如果网页设计人员使用 HTML 和 CSS 来制作可响应所有屏幕尺寸的表格,但不考虑数据量,则他们可能会遇到严重影响网站内容可读性的问题。作为 Divi 网站设计者,您在尝试手动创建响应式表格时可以将以下建议付诸实践。
在减小表格大小以适应较小的屏幕时,您需要构建多个 CSS 类,每个类都针对特定的屏幕分辨率。
您可以采取的另一种解决方案是当屏幕尺寸较小时隐藏表中的特定列。
对于较小的屏幕,您可以在表格的页眉和页脚中包含水平或垂直滚动条。
创建一个可以缩放以适合所有屏幕尺寸的表格,并缩放表格以使材料更易于阅读。
这些解决方案需要大量的工作,并且要求可能因内容和屏幕尺寸而异。
解决方案 1:可以使用 Divi Builder 创建表。
Elegant Themes 制作了一个教程来演示如何使用 Divi 的内置功能构建响应式表格。在这里查看一下。他们向溢出表容器的列添加了水平滚动功能,使表能够更好地响应用户输入。您可以访问教程页面了解更多信息:
解决方案2:使用默认包含此功能的表格 plugin!
为您的 Divi 网站制作响应式表格不再是问题,这要归功于存储库中提供的大量免费 plugin 解决方案。然而,找到具有内置移动响应选项的表格 plugin有点棘手。流行的 plugin(例如 wpDataTables)没有此功能作为免费选项。
在本文中,我们认为 WP Tabe Builder plugin是最好的插件之一。
WP Table Manager
WP Table Manager 是唯一一个提供完整电子表格界面来管理表格的 WordPress 表格 plugin 。创建表格,选择主题,创建完成后立即开始编辑表格。您将受益于一整套强大的表格编辑功能,包括 HTML 单元格编辑、表格复制、计算以及与 Excel、Google Sheets 和 Office 365 的同步;它就像单击单元格并在有或没有可视文本编辑器的帮助下编辑数据一样简单,最终用户可以更改表格。

WP Table Manager 允许您使用简单的可视化界面设计有吸引力的、响应灵敏的表格。它可以免费使用。激活后,您将进入设置指南。按照程序进行操作并根据您的喜好进行必要的调整。就像变魔术一样,您创建了一个漂亮的表格,可以在任何尺寸的各种设备上精美地显示。然后您所要做的就是复制短代码并将其粘贴到您希望其显示的页面中。该构建器目前提供七个元素(文本、图像、列表、按钮、星级、自定义 HTML 和短代码),您可以使用拖放功能将它们拖放到表格占位符中。这些可用于构建各种类型的表格,例如产品比较表、定价表、列表表等;这是我们在调查过程中发现的对新手最友好的表格 plugin 。请记住,当前版本没有搜索字段或任何其他类型的过滤功能。此外,如果您打算输入或管理许多数据集,这可能不是理想的选择。对于这种类型的使用场景,Visualizer 或 Tablepress 都是很好的选择。
WP Table Manager的界面
您可以将短代码包含在 Divi 的代码模块或文本模块中。

DIVI 主题包括 WP Table Manager。

WP Table Manager plugin 负责处理表格时的管理细节;
- 在表格上激活过滤器选项后,您可以搜索每一列的数据并过滤整个表格。它也适用于巨大的表格,包括分页

- 每列上显示的向上和向下箭头将排列您的表格数据。表数据排序也适用于大型表,包括分页。

- 使用所需的所有数据构建表后,您可以让用户排序,但您也可以建立默认顺序。当信息随时间变化时,这可能非常有用,因为您可以在比赛结束后按到达顺序对跑步者进行排序。

- 如果您想在网站前端显示大型表格,同时维护服务器资源,则需要分页。每页选择预设的表格行数。
还有一种通过 WP Table Manager Excel 文件导入器管理 Excel 文档的开放方式。但是,您只能将 Excel 数据导入和转换为可编辑的 HTML 表格,或者导入样式包括颜色、背景、列大小、链接的 Excel 文件。

管理您的 Excel 表格并将其发布到您的 WordPress 网站上!您可以通过 WordPress 媒体管理或 FTP 客户端将 Excel 文件上传到表格。然后,选择您的 Excel 文件并从表设置启动同步。
WordPress 表和 Excel 文件之间的同步可以定期进行,从一分钟到一天不等。还可以定义自动同步延迟以避免不必要的 WordPress 公共表更新或为大型表节省服务器资源。

导入表后,可能会更新所有数据;这只是一个普通的 HTML 表格,可以像 plugin一样编辑! WordPress 电子表格。
另一方面,在使用所需的所有数据构建整洁的表格后,您可以将其导出为传统的 Excel 文件,amp稍后重新运行更新的 Excel 工作表。您的用户现在可以在 WordPress 前端将表导出为 Excel 工作表。

WP Table Manager 还通过 OneDrive 与 Office 365 同步。
提供OneDrive Excel文件导入导出工具;通过在运行时导入和修改文件来节省时间。通过 OneDrive 文件同步提高工作效率!选择一个 Office 365 Excel 文件进行同步、自动调整,然后它就会出现在您的网站上。
WP Table Manager 可帮助您从数据库构建和导入选项卡;它现在包括一个用于从选定的网站数据库内容生成表格的工具,这在以前是不可用的。选择数据库中的表和列,应用可配置的过滤器,并通过 WP Table manager 界面管理表。当数据库更新时,您的表会自动递增!此外,您还可以使用排序、过滤、自动设计和分页选项。
如果您不是开发人员,您可以将任何数据库材料直观地连接到您的 HTML 表。当从数据库内容生成新表时,会显示数据库中的所有表。

您的网站数据库可能会进行简单的搜索并选择您的表格和列;这在庞大的数据库中非常有用。此外,这里有一个向导可以帮助您逐步处理数据库中的表。

在最后阶段,在预览数据库中的表之前,您可以在指定的数据库表上编写自定义查询。我们支持一些功能,如 SELECT、REPLACE、RENAME、SHOW、EXPLAIN、DESCRIBE。
数据库表有时会包含很多行;因此,此选项可能有助于显示适合您屏幕的表格。此外,您可以设置表格每页的预定义行数。此外,您还可以选择一列对整个表进行默认排序。

WordPress 数据库表连接不仅限于 WordPress 表。所有不是来自 WordPress 但安装在同一数据库上的表都可以连接。
在表上的海量数据中,您可以创建一些自定义规则来专注于特定对象。如果您熟悉它,您可以使用数据库运算符,例如 >、<、LIKE、IN...

您创建的数据库中的表可以像任何其他表一样进行编辑(如果用户有权访问该实用功能)(如果用户有权访问该实用功能);这对于批量编辑一些数据库数据非常方便,amp,几个发布后的日期,如果逐一完成,将需要一段时间。
结论
表格是展示一组信息的最有效方法之一。然而,对于技术水平较低的人来说,在网页上创建表格是一个挑战。使用这些 plugin,您只需几个简单的步骤即可轻松制作在任何设备上可读的表格。此外,响应式表格肯定会给您的网站访问者带来积极的整体体验。因此,请尝试一下,并在下面的评论部分告诉我们您的体验。