如何在 WordPress 中创建响应表

HTML 表格，曾经常用于网页布局，现在却是一个令人头疼的布局问题许多网页设计师.表格通常在固定宽度下效果最好，这意味着它们可能会对像素完美的响应式网站设计造成严重破坏.那么 WordPresser 该怎么做?

使用表格的第一件事就是谨慎使用它们.表格应该用于表格数据，而不是其他任何东西.

不确定表格是否适合特定数据集?将其用于电子表格测试.在电子表格中显示这些数据是否有意义?

如果是这样，HTML 表格是合适的选择.如果没有，请考虑使用列表或其他元素来呈现数据.

一旦你确定了一张桌子是最好的选择，然后呢?无论查看表格的设备大小如何，都要确保它呈现精美.说起来容易做起来难，对吧?

不要害怕.在本教程中，您将了解五种不同的工具，您可以使用它们来使 HTML 表格具有出色的响应性.

WordPress 如何处理表格?

这个问题没有直接的答案.WordPress 中表格的显示方式因主题而异，因为表格样式由每个主题附带的 CSS 处理.

所以表格是根据活动主题中包含的 CSS 规则呈现的.切换主题和表格的呈现方式会发生变化.

某些主题对响应式表格的内置支持比其他主题更好.例如，TwentySixteen 可以很好地处理表格，只要它们只有两个或三列填充了一小段数据.

然而，并非所有主题都像《TwentySixteen》那样精心设计.

让我们看看当在手持设备上呈现时，TwentySixteen 如何处理 HTML 表格.下面是一段 HTML 代码，可以生成一个五列六行的表格.

它根据 W3Techs 显示了最流行的内容管理系统.

加载要点 jpen365/690646da6b8a6926f49b0a4b4b21f

当放入激活了TwentySixteen 子主题的帖子时，该表格在笔记本电脑或台式机显示器上看起来非常好.很明显，TwentySixteen 包含周到的表格样式.

我们可以使用 Chrome 开发者工具设备模式在较小的设备上查看内容.

嗯，这并不理想.

TwentySixteen 开发人员确实包含了使表格具有响应性的 CSS 样式.如果这个表只包含两到三列，它可能看起来很不错.

但是，该表格包含五列，这对于TwentySixteen 中包含的默认表格样式来说太多了.

让我们把这张桌子修好.

手动使表格响应

我们要查看的第一个选项是手动修复，包括向主题添加 CSS 和 JavaScript.这听起来可能很棘手，但实际上很简单.

要使表格具有响应性，我们需要三件事:

• 格式正确的 HTML 表格.
• 一小段 JavaScript，用于将每个表格标题单元格与出现在同一表格列中的数据单元格相关联.
• 一个简单的 CSS 规则集，当显示缩小到预定宽度以下时将触发该规则集.这段 CSS 会将表格行重新排列成列，隐藏标题单元格的行，并将标题单元格的内容添加到每个数据单元格中.

需要注意的是，表格必须格式正确才能使其正常工作.

该脚本旨在查找 thead 元素中的标题单元格，并将它们作为 HTML 属性分配给 tbody 元素中的数据单元格.

如果您创建的表格不包含 thead 和 tbody 元素，则代码将不起作用.

这是我们将使用的 JavaScript:

加载要点 jpen365/f34bbff7d9db99f912e1e7571930

这是适用的 CSS.

加载要点 jpen365/337ee996d81ad4b6ea62474b3639

使用此代码的最简单方法是将其直接添加到表格所在的帖子或页面.您可以通过在 style 标签之间删除 CSS 并在 script 标签之间删除 JavaScript 来实现这一点.

如果您决定这样做，请确保在将 JavaScript 放入缩小之前文本编辑器或 wpautop 函数 将向脚本添加段落分隔符，在此过程中将其断开.

结果实际上非常好.以下是在 Google Chrome 中使用 iPhone5 预览版预览时表格的外观.

制作表格的更好方法

将 CSS 和 JavaScript 直接添加到帖子中并不是添加代码的最佳方式.

如果您只使用过一次此代码，将其直接添加到表格所在的帖子或页面中即可.

但是，如果您打算定期使用表格，添加代码的更好方法是将其直接嵌入主题文件中.

将代码正确添加到您的主题中确实没有那么难.只需四步即可完成.

• 首先，确保您使用子主题，以免在下次更新主题时丢失您的作品.
• 其次，将 CSS 复制并粘贴到主题的 style.css 文件中.
• 第三，将 JavaScript 保存为单独的文件并将其上传到您的主题目录.
• 第四，使用主题 functions.php 文件中的 wp_enqueue_script 函数将 JavaScript 资源添加到您的主题，确保在执行此操作时将 in_footer 设置为 true.

这个过程中最棘手的部分是用 wp_enqueue_script 添加脚本文件，但我可以让这一步更容易一些.

这是您可以添加到 functions.php 文件的代码片段，假设您使用的是 JavaScript 文件 responsive-tables.js 和放在主主题目录下.

加载要点 jpen365/edbaff053f33d0d44d219a0a268a

您的 functions.php 文件可能看起来有些不同，但这可以让您了解入队函数应该是什么样子.

WPMU DEV 作家和 WordPress 开发人员 Daniel Pataki 在此博客中深入介绍了wp_enqueue_script 功能.因此，如果您在这一步遇到困难，可以参考该教程(就像我所做的那样).

完成所有四个步骤后，CSS 和 JavaScript 将在您网站的每个页面上可用，并且网站上的任何表格都将具有响应性.

干得好.

使用插件创建表格

当然，也许您不想解决所有这些麻烦，而只想使用 WordPress 表格插件.

WordPress 插件目录中肯定有很多表格插件，其中许多声称可以使表格具有响应性.

为了节省您的搜索时间，请查看我们关于选择最佳 WordPress 表格插件 的帖子，其中比较了不同的响应式表格插件，这些插件可以很好地呈现渲染效果任何尺寸设备上的表格.

但请记住，这些插件不会影响已添加到您网站的任何现有表格.如果您正在寻找可以追溯修复表格的插件，请查看下面的插件.

• Magic Liquidizer响应式表

  

  此插件旨在使标准 HTML table 元素具有响应性.您所要做的就是安装并激活插件，嵌入到帖子和页面中的任何表格都将神奇地流动(响应式).

  插件的设置页面确实提供了指定响应设置生效的视口宽度的选项.

  因此，如果表格过早进入响应模式，或者在切换到响应模式之前破坏布局，您可以调整视口宽度.

  此外，如果使用 table 元素作为选择器，插件不工作，您还可以设置插件通过 #id 或 .class 选择表.

  插件实际做的是将 display: none; 添加到设置视口宽度的表格 CSS 中.然后它使用 JavaScript 将表重建为 HTML 描述列表.

  标题作为术语添加，表格值作为定义添加.这是结果.

  

  您可能已经注意到，此插件并未选取和显示表格标题.

  如果您确实使用了此插件，您将希望避免使用 caption，因为它不会在以响应模式查看表格时显示.

• 自动响应表

  

  这个超级简单的插件完全按照它所说的去做:自动使您的表格响应.安装它，激活它，配置一些基本设置，所有嵌入到帖子和页面中的 HTML 表格都将响应式呈现.

  安装插件后，访问设置 > 响应式表格来设置插件.

  首先，选中复选框使表格具有响应性，然后设置一个断点，表格应在该断点处切换到响应模式，然后决定您希望表格的样式.

  选择默认样式选项将生成如下所示的表格:

  

  很不错吧?它是如何工作的?

  与 Magic Liquidizer 一样，此插件将 display: none; 添加到表格并使用 JavaScript 重建表格.

  然而，该插件不是使用语义上有意义的描述列表，而是使用 div 元素构建响应表.

  最终结果看起来确实不错，但从语义的角度来看，标记并不理想.

  此外，值得注意的是，该插件不会在响应模式下呈现表格标题.因此，您需要找到另一种添加表格标题或标题的方法.

哪个是您的正确选择?

嗯，这取决于.

您多久使用一次表格?

您在 HTML 表格中呈现什么样的数据集?

您想要一个可以完成所有繁重工作的插件，还是想要亲自处理您网站的代码?

您如何回答这些问题将有助于确定哪些工具适合您的 WordPress 网站.

• 您想要一个强大的表格工具来创建可排序和可搜索的复杂表格吗?您是否希望在不破坏站点响应式设计的情况下处理大型数据集和固定宽度的表格?然后选择我们在在这篇博文中评论过的插件之一.
• 您是否喜欢浏览代码并想要一个资源少且外观漂亮的手工解决方案?尝试手动实施，并对其进行调整以使其成为您自己的.
• 您是否只是在寻找简易按钮?查看自动响应表 或Magic Liquidizer 响应表.我敢肯定，这两个中的一个会让你开心.

在智能手机和平板电脑上，桌子不必看起来很糟糕.稍加考虑和努力，您就可以在 WordPress 网站上使用 HTML 表格，并让它们在所有设备上看起来都很棒.

标签:

• design
• 响应表
• tables