如何在 WordPress 中创建响应式表格

表格是一种网站设计元素，可以帮助您以有组织的方式优雅地显示大量信息。 它们在传统计算机显示器上运行良好，但在移动设备上通常会产生不良体验。

幸运的是，有几种可行的解决方案可用于创建更具响应性的表格。 使用这些响应式设计实践可以改善您网站的用户体验 (UX)。 这意味着访问者将能够更轻松地查看和访问表格中的数据，无论他们使用何种类型的设备。

在本文中，我们将了解使表格具有响应性意味着什么。 然后，我们将介绍两种在 WordPress 中创建响应表的方法。 让我们开始吧！

什么是响应表？

通常，表格的目标是以有意义的方式显示大量数据。 然而，当您尝试在移动设备上查看表格时，事情可能会出错。 发生这种情况是因为表格行通常比屏幕显示可以处理的列宽很多。

当您创建一个响应表时，您实际上是在为您的原始数据表创建一组规则。 这些规则可以根据显示大小确定断点。 这意味着如果用户在小于您设置的断点的设备上访问表格，表格布局将通过重新格式化以适应屏幕大小来响应。

响应式表格通常可以通过添加滚动条或堆叠信息来重新格式化。 您不希望随着屏幕尺寸的变化而缩小并将单元格中的信息塞在一起，因为这会使表格不可读。 幸运的是，响应式设计并不难实现。

如何制作响应式表格（无插件）

基本上有两种方法可以在 WordPress 中使表格响应。 首先，我们来看看如何在没有插件的情况下完成工作。

这将需要一些编码知识：特别是对层叠样式表 (CSS) 的理解。 我们还建议在暂存或开发环境中工作，而不是在您的实时网站上工作，直到您设计出可靠工作的表格。

第 1 步：为响应式 CSS 格式化表格

在此示例中，我们将告诉示例表的数据在特定断点处重新格式化。 在某些情况下，您可以简单地将滚动条添加到表格中，但我们将实际对表格数据进行分组，使其以更具可读性的格式显示，从而消除了水平滚动的需要。

这是一个很好的方法，因为水平滚动通常意味着您正在脱离上下文查看列的数据：

为了使该表格更好地工作，您首先需要确保您的表格格式正确。 如果您使用块编辑器创建表格，您可以正常执行此操作，然后添加 <thead> 和 <tbody> 属性以确保您的 CSS 能够正常工作：

添加表格后，您可以使用 HTML 编辑器调整其格式。 您的 <thead></thead> 属性需要包装所有列标题。 同样，您会将所有后续表数据包装在 <tbody></tbody> 属性中。

一旦您在下一步中添加了 CSS 标记，您的样式表将能够理解什么应该显示为表中每一列的标题，以及什么是正文或单元格内容。

第 2 步：向您的 CSS 添加自定义标签

接下来，我们将使用一段自定义 CSS 代码和 WordPress Twenty Nineteen 主题。 这个主题有一个相当响应式的设计作为其原生代码的一部分，但我们的 CSS 调整将使它更进一步。

由于所有主题都不同，您需要彻底了解主题的结构，以便成功实施响应式表格设计。 某些主题可能需要额外的 JavaScript 库。

对于我们的示例，我们将导航至Appearance > Customize > Additional CSS ，我们可以在其中添加以下自定义 CSS 代码：

将自己的代码粘贴到编辑器后，您需要选择发布以使更改生效。

第 3 步：在 WordPress 中测试表格的响应能力

WordPress 有一个有用的内置屏幕测试功能，使您能够在三种不同的屏幕尺寸上测试您的内容。 在添加自定义 CSS 的屏幕底部，您可以单击平板电脑或手机图标来测试表格的新样式：

对于这个例子，我们已经创建了一个简单的表格，其中包含所有必要的 HTML 属性以使用我们的 CSS。 我们在 CSS 中的断点设置为 600px，但可以根据您的需要进行更改。

我们添加的 CSS 没有添加滚动条或压缩表格数据，而是将数据重新组织为适合移动设备的格式。 这使移动设备上的用户能够垂直滚动，并在其余相关单元格的上下文中查看表格数据。

如何使用插件制作响应式表格

如果您不习惯自定义主题的代码或 CSS，还有另一种选择。 有许多可用的 WordPress 插件可以帮助您为您的网站创建响应式表格设计。

第 1 步：下载插件

首先，您需要选择一个插件。 由于设计响应式表格有很多选择，我们将重点介绍一些以帮助您入门：

• Ninja Tables ：被标记为 WordPress 用于构建响应式表格的第一插件，它有超过 100 种表格样式可供选择。
• wpDataTables ：这是一个付费版的免费插件，但精简版包含用于创建丰富的交互式表格和图表的功能。
• WP Responsive Table ：这是一个简单且免费的插件，可以轻松创建在小屏幕上水平滚动的响应式表格。

对于此示例的其余部分，我们将使用 Ninja Tables 来演示如何在 WordPress 中创建响应式数据表。

第 2 步：输入您的数据

安装并激活插件后，您就可以直接开始创建表格。 您可以导航到NinjaTables > 所有表 > 添加表：

您可以在此处从头开始添加新表，也可以从文件导入表。 我们将使用“添加表”选项从头开始创建一个表。 然后，您需要为表格输入标题和说明：

您在这里还有其他一些选择。 例如，如果您正在设置 WooCommerce 商店，您将能够使用该信息来创建 WooCommerce 表格。

添加信息后，您将单击“添加”以创建表格。 然后您需要开始输入数据。 您可以选择添加列来设置表的结构：

为了创建您的专栏，您需要完成几个字段。 这包括列的标题名称及其包含的数据类型。 您还可以设置其响应断点：

要从确定您的表格如何响应不同设备的多个选项中进行选择，您可以通过单击Always show in all devices访问菜单：

构建列后，选择“添加数据” ，NinjaTables 将为您提供一个简单的表单，以便您快速向表中添加多个条目：

如果您要输入多个条目，则可以选中继续添加选项。 完成后，您可以关闭窗口并返回到表格编辑屏幕。

第 3 步：格式化表格

现在您有了一个包含信息的表格，您可以探索 NinjaTable 的设置和样式选项。 在表格编辑窗口中，您可以通过顶部选项卡访问更多设置，也可以在屏幕右侧向下访问：

您将有许多选项来自定义表格的样式和外观，包括交替表格行颜色、居中文本、隐藏数据等等。

第 4 步：测试您的桌子

NinjaTable 使您可以在编辑表格时轻松测试表格的响应能力。 在“表格设计”选项卡中，您会找到三个用于测试屏幕响应能力的选项：

您可以选择Desktop 、 Tablet或Mobile来查看您的桌子在这些类型的设备上的外观。

您创建的每个表还带有一个简码。 此外，您可以使用位于“块编辑器”菜单的“格式”部分中的 NinjaTable 块轻松地将任何表格添加到您网站的内容中。

让 WP Engine 帮助您保持网站响应

当您可以访问正确的资源时，构建一个采用可靠响应式设计的网站并不一定是一个挑战。

在 WP Engine，我们希望您能够为您的客户提供最佳的数字体验。 查看我们为您的下一个项目提供的许多 WordPress 托管计划和开发人员解决方案！