在wordpress的文章页面中插入表格的方法

  • A+
所属分类:wordpress

在wordpress程序创建的blog中写文章很头疼的一个问题是如何创建美观的表格,就我个人而言中在wordpress中插入表格的方法有两种:

1.在office、WPS等办公软件创建的word文档中先创建好表格,然后再粘贴复制到wordpress中。缺点是复制到wordpress中之后表格的边框消失了,看起来不够美观。

2.通过WordPress 表格插件TablePress来搞定。

在wordpress的文章页面中插入表格的方法

WordPress 表格插件TablePress示例表格

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

WordPress 表格插件TablePress的功能:
通过你的 WordPress 管理后台管理表格
使用简码在你的文章、静态页面或者文本小工具中展示表格
使用模板标记函数将它们显示在你的 WordPress 主题的任意位置(参考用法一节)
表格特性包括(可以根据不同的表格启用或禁用):
内容任意:文字、数字、图片、链接,你喜欢的话甚至可以写入 HTML 或者 JavaScript 代码
类似 Excel 的公式计算
表格结构可以包含跨列或跨行(rowspan/colspan)的表格单元
将首行显示为表头(HTML 标记)
将末行显示为表尾(HTML 标记)
交替变换的行背景颜色
突出显示行(当鼠标悬停时)
在表格上方或下方显示表格名称
在表格上方或下方显示表格描述
使用 DataTables JavaScript 库 可以实现对表格进行分页、排序或者筛选、滚动条等功能(查看 演示)
每个表格都可以通过自定义 CSS 样式来实现个性化显示(例如不同的列宽文本对齐方式、或者色彩等)
在编辑界面上的功能包括:
增加/创建表格(手工输入)
导入表格(从 Excel (.xls/.xlsx), CSV, HTML 或者 JSON 文件导入,可以上传、通过链接地址或者直接输入),甚至可以批量导入
导出/保存/备份表格为上述的大多数文件格式,也可以批量导出
编辑表格数据和结构(增加/插入/删除/移动/交换/隐藏列或者行,按列排序等)
轻松增加链接或者图片到表格(从媒体库中)
不需要 HTML 知识也可以通过高级编辑器进行一些样式设定
复制/创建副本和删除表格
通过文章编辑器的工具条上的按钮将表格轻松嵌入到文章或页面
预览表格

WordPress 表格插件TablePress的用法:
安装该插件之后,你可以通过你的 WordPress 控制面板中的 “TablePress” 菜单进入 TablePress 管理页面,然后添加、导入、导出、编辑、复制、删除…表格。
为了将你的某个表格显示在文章、页面或者文本微件中,只需要将对应的简码 [table id=<the-ID> /] 添加到你的文章/页面/文本微件的相应位置即可。其中 <the-ID> 是该表格的 ID(你可以在“表格列表”左边看到表格的 ID 号,或者,你也可以在编辑完表格后就记下它的 ID(最左端的数字))。
你也可以在文章/静态页面的编辑器中单击“表格”按钮(一般是可视化编辑器工具栏的第一行最后一个按钮)来查看你所有的表格的列表。如果你随后单击表格列表右端的“插入简码”按钮,则相应表格的简码会自动添加到编辑器重光标所在位置。
如果要在你所使用的主题的其它位置添加表格,你可以使用模板标记函数来实现。请参考 TablePress 开发及使用文档的模板标记函数一节来获取更多相关信息。
如果你想要改变表格的显示风格,可以在“插件选项”页面的文本框中直接输入你的 CSS 样式代码后保存即可。在 TablePress 常见问题页面有一些关于自定义 CSS 样式的示例。
你还可以通过在表格“编辑”页面勾选相应的选项来为你的表格启用诸如排序、分页、过滤、奇偶行不同颜色、高亮行、打印名称和/或描述等等特色功能。

最体贴的是TablePress表格插件还支持中文,让你一目了然。不过,我个人觉得它的缺点也很明显,就是不能在前台直接编辑,只能在后台编辑好之后复制简码粘贴到前台使用,有点麻烦。

avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: