最近在整理一些所学内容的时候想要使用一些表格以使得整理的内容更加清晰,然而WordPress默认的编辑器是没有表格功能的,如果每次使用表格都使用代码编辑显然是一件非常麻烦的事情,特别是当所建立的表格特别多的时候。所以决定使用插件解决表格的问题,在网上搜索到了许多的表格插件并分别进行了测试,最终选择了TablePress这款插件,不过需要注意的是这款插件使用短代码的形式进行调用,如果你因为某些原因需要卸载这款插件的时候所有使用该插件生成表格的文章都会在前端只显示一行短代码,慎用!

好了,现在就来介绍一下这款插件。

TablePress是由德国马格德堡的“工程控制论”领域的博士生TobiasBäthge所开发的一款WordPress表单插件,你可以使用它在WordPress网站上轻松地创建和管理表格,然后使用短代码插入到静态页面、文章或者文本小工具中。它的后台操作非常方便,不需要用户具备任何 HTML 编程知识。。用户还可以轻松的从 CSV、HTML 或者 JSON 文件中导入数据来创建新表格或替换已有表格,也可以将表格导出为 CSV、HTML 或者 JSON 文件以供其它程序使用。

相关链接

插件下载链接:https://wordpress.org/plugins/tablepress/

英文使用文档:https://tablepress.org/documentation/

中文使用文档:https://cnzhx.net/wordpress-plugins/tablepress/documentation/

常用CSS

注意:以下所有CSS如果将.tablepress更改为.tablepress-id-N,则可将这种改变仅用于指定的id,不过,一般情况下为了网站的整体显示效果很少特意改变某一表格的风格,故以下CSS均为全局代码。

改变 TablePress 中默认的交替行背景颜色设置

.tablepress .odd td { /* 奇数行背景色 */
    background-color: #ff0000; /* 此颜色值为示例,红色 */
}
.tablepress .even td { /*偶数行背景色 */
    background-color: #00ff00; /* 此颜色值为示例,绿色 */
}

更改 TablePress 中默认的鼠标悬停时行的背景颜色

.tablepress .row-hover tr:hover td {
    background-color: #ff0000;
}

更改表格中的字体、字体大小和字体颜色

.tablepress tbody td {
    font-family: Tahoma; /* 字体 */
    font-size: 14px; /* 字体大小 */
    color: #ff0000; /* 字体颜色 */
}

将单元格内文本居中显示

.tablepress thead th, /* 用于标题栏 */
.tablepress tbody td { /* 用于表格中的所有单元格 */
    text-align: center; /* 水平居中 */
    vertical-align: middle; /* 垂直居中 */
}

将表格在页面中居中显示

.tablepress {
    width: auto;
    margin: 0 auto 1em;
}

隐藏特定表格的边框

隐藏表格的边框一般情况下是对某一特定的表格做出的改变,所以这里给出指定id为N的表格隐藏边框的CSS,也方便大家对照上面全局的CSS。

.tablepress-id-N,
.tablepress-id-N tr,
.tablepress-id-N tbody td,
.tablepress-id-N thead th,
.tablepress-id-N tfoot th {
    border: none;
}

关于插件选项的解释,因为插件本身的注释已经很清楚了,在这里就不多加说明了。如果大家还有什么不明白的可以查看前面给出的文档链接,了解更加详细的说明。

 

官网下载https://wordpress.org/plugins/tablepress/