TablePress WordPress 表格插件扩展响应式表格的使用教程

TablePress 是一款优秀的 WordPress 表格插件,让你可以方便的通过 WordPress 管理后台创建和管理表格,然后使用非常简单的方法插入到静态页面、文章或者文本小工具中。有方便易用的后台界面来编辑表格数据,不需要 HTML 知识。表格可以包含任何类型的数据,如数字、文本、图片、链接,甚至可以进行公式计算。可以使用附加的 JavaScript 库为表格读者提供诸如排序、分页、过滤(搜索)等特色功能。还可以轻松的从 Excel (.XLS 和 .XLSX)、CSV、HTML 或者 JSON 文件中导入数据来创建新表格或替换已有表格,也可以将表格导出为 CSV、HTML 或者 JSON 文件以供其它程序使用。

TablePress 可以使您能够简便地创建和管理漂亮的表格。

您可以使用短代码将表格显示在文章、页面或者小工具中。

表格可以通过常用的电子表格软件编辑,所以不需要编程。

表格中可以包含各种类型的数据,甚至支持公式计算。

TablePress 使用额外的 JavaScript 库来为网站访客提供诸如排序、分页、过滤等其它功能。

表格可以通过 Excel、CSV、HTML 和 JSON 等文件格式导入或导出。

使用教程

安装插件之后,您可以在 WordPress 控制面板的“TablePress”页面创建或者管理表格。

要在一篇文章或页面中展示表格,将该表格的短代码

[table id=<ID> /]

嵌入到区块编辑器中的适当位置处的一个 “短代码” 区块中。每个表格都一个唯一的 ID,需要与短代码中的 ID 相对应。

如果想改变表格的样式。您可以通过在“插件选项”页面的“自定义 CSS”文本框中输入 CSS 代码来实现。

还可以在表格的“编辑”页面勾选相应的复选框来添加诸如排序、分页、过滤、交替行背景色、高亮行、显示表格名称和/或表格描述等功能。

下面我们来实际操作一下创建表格,并把表格显示在文章详情页里。

创建表格

TablePress WordPress 表格插件扩展响应式表格的使用教程

编写表格

TablePress WordPress 表格插件扩展响应式表格的使用教程

复制表格短代码

TablePress WordPress 表格插件扩展响应式表格的使用教程

黏贴短代码到文章编辑器

TablePress WordPress 表格插件扩展响应式表格的使用教程

前端显示

TablePress WordPress 表格插件扩展响应式表格的使用教程

此时的表格,在手机端查看会出现错位的情况。

TablePress WordPress 表格插件扩展响应式表格的使用教程

下面我们就来解决这个问题。

tablepress responsive tables

要想解决手机端错误的情况,就得用

这个tablepress的扩展插件。

该扩展提供了四种方法来解决此问题:

flip:在此模式下,扩展程序会通过将表的侧面翻转(行显示为列,反之亦然)并使其水平滚动来更改表的布局。对于纯数据/文本表,此模式是一个很好的解决方案,但通常在带有图像的表中不能很好地工作。

scroll:此模式可解决因表格太大而无法完全显示上一个模式的水平滚动。这样,用户仍然可以访问所有表数据。如果带图像的表不会自动调整大小,可以选择这个模式。

collapse:该模式可以向表添加隐藏/扩展效果。它从那些本来会被截断的列中隐藏数据,并将数据添加到每个条目下方的可折叠的行中。可以使用“ +”和“-”按钮显示和隐藏该行。此模式在显示某些“主要”列的附加信息的表(例如目录表)中特别有用。

stack:此模式将一行的单元格彼此重叠显示,而不是彼此相邻。这将使表更加狭窄,因为它似乎只有一列。但是,由于来自表头行的列标题单元格将不可见,因此此方法最适合于容易识别其信息的文本数据,例如在目录表中。

需要注意的是:在前三种模式中,排序、过滤和分页将继续起作用!对于stack模式,将无法排序。

好了,定义看完了,是不是觉得没看懂?没事,下面的图将让你一目了然。

TablePress WordPress 表格插件扩展响应式表格的使用教程
TablePress WordPress 表格插件扩展响应式表格的使用教程
TablePress WordPress 表格插件扩展响应式表格的使用教程
TablePress WordPress 表格插件扩展响应式表格的使用教程

看完图,是不是容易理解了?

下面我们将学习如何使用这四种模式。

响应式表格使用教程

假如某个表格的短代码为

TablePress WordPress 表格插件扩展响应式表格的使用教程

将此表格变成四种响应式的表格

TablePress WordPress 表格插件扩展响应式表格的使用教程

实际使用中,选择一个模式即可。(这里四种模式全都列出来,只是为了演示)

flip、stack 模式的进一步自定义

这两种模式还可以再进行自定义,即可以选择让表格在手机、平板、电脑上的显示方式。

举个例子就明白了:

TablePress WordPress 表格插件扩展响应式表格的使用教程

这行短代码的意思就是 表格在手机端显示成

模式,非手机端就是默认的模式了。

TablePress WordPress 表格插件扩展响应式表格的使用教程

这行短代码的意思就是 表格在手机端、平板上显示成

模式,电脑端就是默认的模式了。

具体的规则如下:

phone:flip或stack模式仅在手机(屏幕宽度小于768像素的设备)上使用tablet:flip或stack模式用于手机和平板电脑(屏幕宽度小于980像素的设备)desktop:flip或stack模式用于手机,平板电脑和中型台式显示器(屏幕宽度小于1200像素的设备)all:无论屏幕大小如何,所有屏幕均使用flip或stack模式好了,到此为止,

tablepress

和它的响应式插件就介绍完了,希望对小白用户有所帮助。

tablepress扩展一览表

表格插件还有很多其他的功能性扩展,我在下面列出来,如果有需要介绍使用方法的朋友,可联系我或留言。

Automatic URL conversion,即让输入的网址自动转换成可以点击的链接。PHP code in table cells,即解析并执行表格单元中的PHP代码。Row Filtering,即只显示表中有过滤词的行,没有过滤词的行将不显示。这样一个大表,显示的时候就可以分成几个小表显示。Single Cell Content Shortcode,即提取表格中某个单元格的值到页面上。Table Row Order,即在前端显示的时候按照你设置的顺序显示(随机、倒序、正序)。DataTables Sorting plugins,支持某些数据类型(例如带有货币符号的货币值,与文本结合的数字或欧洲日期)的排序DataTables Buttons,此扩展程序可以向表中添加更多功能,即“复制到剪贴板”,“保存到PDF”,“保存到Excel”,“保存到CSV”的按钮”,“打印视图”和“列可见性”。DataTables FixedColumns,此扩展使您可以固定表左侧和右侧的列。DataTables FixedHeader,当用户滚动浏览页面上的长表时,此扩展程序会将表的标题行固定在屏幕顶部。Pagination Length Change “All” Entry,对于某些大表,将“所有”条目添加到表左上角的“分页长度更改”下拉框中(如果启用了分页);比如每页10行数据,一共100行,那么在前端你要看完这100行需要翻9页,有了这个扩展,可以一次查看全部。Change DataTables strings,更改表周围可见的某些功能(如“搜索”和“分页”)的文本字符串。DataTables Column Filter,该插件可将过滤框添加到表脚行。DataTables ColumnFilterWidgets,可用于在表格上方添加过滤下拉框。每列都会有一个选择框,其中包含该列中所有可能的值。DataTables Counter Column,该插件可将表的第一列转换为带有“计数器”的列,该列具有表的行号。该列不可排序,并且在将排序和过滤应用于表时保留在原位。Change the [table] Shortcode,更改使用的简码的名称,即将table改成你想要的字符串,如tablemi。Change the Admin Menu Name,默认情况下,TablePress将作为“TablePress”添加到wordpress后台管理菜单中。此扩展允许将其更改为任何其他字符串,例如“Tables”。Larger Edit Input fields,有些人在单个单元格中需要输入很多内容,因此希望在表格的“编辑”里具有较大的文本字段,这款扩展即可实现。Automatic Periodic Table Import,有些人在其他程序(例如Excel)中维护表,并定期(例如每天两次)将其作为CSV文件保存到服务器。然后,手动将表导入TablePress进行更新。这款扩展可以使此过程更简单。只需要配置一次,然后将定期从服务器或URL导入文件,并用文件中的数据替换现有表。

原创文章,作者:开心电脑网,如若转载,请注明出处。

(0)
上一篇 2021年4月11日
下一篇 2022年8月28日

相关推荐

发表回复

您的电子邮箱地址不会被公开。