在WordPress文章中插入表格的四种方法,史上最全

投稿   Hunk  2018-01-11 07:39:37  596 人阅读  30 条评论

在做 WordPress 网站的时候,很多时候文章中都会用到 table 表格,今天就来总结分享四种在WordPress 文章中插入 table 表格的方法。

一、最简单的方法:复制excel表格直接粘贴

这种方法适合很简单的表格,最好是2列的,优点是简单,直接复制粘贴即可,短板就是表格很素,一点也不cool。

具体操作方法如下:

在 excel 编辑好表格之后,选中表格,并复制(多余的空格不要复制),然后粘贴到WP网站文章需要粘贴的位置,以 AVADA 主题为例,一般是粘贴到 text block 这个 element 里面(文章编辑框内),注意一定要粘贴在编辑器的visual(可视化)模式下,如下图:

在WordPress文章中插入表格的四种方法,史上最全 WordPress 第1张

保存,update之后 ,刷新前台页面,可以看到表格了,不过没有边框,文字也不居中,如下图:

在WordPress文章中插入表格的四种方法,史上最全 WordPress 第2张

需要加一些css代码来设置边框和文字居中,如下:

td,tr{border:1px solid #eee;text-align:center;padding:10px;}

将以上代码加到网站后台 >> AVADA >> theme options >> custom css 中,然后保存。再刷新前台,就可以看到好看多了。

在WordPress文章中插入表格的四种方法,史上最全 WordPress 第3张

其他操作

把表格中的文字加粗或加链接等操作,先选中文字,再进行加粗等操作,非常简单。

在WordPress文章中插入表格的四种方法,史上最全 WordPress 第4张

注意:有的人会问,为什么后台那里是双虚线,而前台是实线,不一样。原因是前后台就是显示不一样,不用研究这个问题,你只要保证前台是你想要的效果就行了,后台怎么样一点也不重要!

另外,还有人做WP页面,喜欢点预览查看,不喜欢 Publish 或 update查看,这个操作也不对。有的时候网站有 Bug,预览跟实际的显示结果是不一样的,切记!

二、tablepress 插件实现wp网站表格

Tablepress 是一个德国小伙子研发的WP插件,可以直接导入 excel表格来实现。它的基础功能是可以免费使用,但是如果要包含网站响应式功能,就必须购买付费插件。要不要购买看你自己。

注意:tablepress 不适合有合并单元格的表格,因为操作太复杂。由于免费版本不含响应式的功能,如果想免费使用又想保证手机端能兼容的话,最好把表格做的简单一点再上传(最好只有2列)。

具体操作方法如下:

1、先在后台安装和激活 TablePress 插件

在WordPress文章中插入表格的四种方法,史上最全 WordPress 第5张

2、在wp后台左侧菜单就可以看到 tablepress 了,点击 import a table,导入你准备好的 EXCEL 表格文件,记住,它只读取第一个 excel 表的内容。

在WordPress文章中插入表格的四种方法,史上最全 WordPress 第6张

3、选择好你的 excel 文件和文件格式,点击 import 上传

在WordPress文章中插入表格的四种方法,史上最全 WordPress 第7张

4、上传完后,自动跳转到这个表格的编辑页面,往下翻,找到 Features of the DataTables JavaScript library 这一项菜单,把下面的勾全部去掉,这些都是没用的功能,然后 save changes。

在WordPress文章中插入表格的四种方法,史上最全 WordPress 第8张

5、翻到页面上面,复制这个 shortcode,当然,也可以点击wp左侧菜单 >> tablepress >> all tables里面,查看表格的 shortcode。

在WordPress文章中插入表格的四种方法,史上最全 WordPress 第9张

6、把 shortcode 粘贴在页面的 text block 中,保存后,update 页面,再刷新前台。

在WordPress文章中插入表格的四种方法,史上最全 WordPress 第10张

就可以在前台看到表格了,这个看起来很cool,为什么左下角有一个edit呢,是因为我已经登录了网站,所以它有这个提示。如果是访客,是看不到这个edit的。

在WordPress文章中插入表格的四种方法,史上最全 WordPress 第11张

可以看下手机上面的以上两种方法的效果,在手机端上还是很友好的显示的。所以尽量把表格弄简单一点,特别是把列控制在2列,行数可以不限。这样,就可以自动的兼容在手机上显示。

在WordPress文章中插入表格的四种方法,史上最全 WordPress 第12张

历史上的今天:

文章标签: ,   ,  
原文地址:https://www.imhunk.com/wordpress-table/
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 Hunk 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
Hunk

相关文章 分类热门分类热评最新问答

 发表评论

中国赞表情摊手表情吃瓜表情笑哭表情偷笑表情衰表情汗表情思考表情费解表情抓狂表情晕表情流泪表情疑问表情嘻嘻表情吃惊表情鼓掌表情

  1. 银色月航
    银色月航 @回复

    可以把excel里面直接复制过来吧

  2. 菊部
    菊部 @回复

    感谢分享

  3. 蝈蝈要安静
    蝈蝈要安静 @回复

    TablePress还是不错的

  4. 拿着灼热的铁
    拿着灼热的铁 @回复

    不错,支持一个! [呵呵]

  5. 贷款口子
    贷款口子 @回复

    学习了,很好很强大 [赞]

  6. 阁楼藏
    阁楼藏 @回复

    学习了 [赞] [赞] [赞]

  7. 程序员爱好者
    程序员爱好者 @回复

    计算机二级都险过

  8. 康乐民博客
    康乐民博客 @回复

    还是这个实用,对于我这种小白来说,之前苦于寻找不到插入表格的方法。

  9. Parkmimi
    Parkmimi @回复

    挺实用的 学习了!

  10. 明月登楼
    明月登楼 @回复

    我一般都是在Excel里做好,然后打印预览后截图,直接WordPress里上传图片就可以了!博客文章对表格需求没有刚需! [偷笑]

  11. 闲鱼
    闲鱼 @回复

    这个用的少,要用的话我都是用在线编辑器随便弄一下的

  12. 品牌馆
    品牌馆 @回复

    这个功能确实不错

  13. 马超金博客
    马超金博客 @回复

    还没做过表格,但听说编辑文章时有插入表格按钮

  14. 80后记忆
    80后记忆 @回复

    虽然不用表格,但是也学习下。

  15. 姜辰
    姜辰 @回复

    还是习惯用markdown来画表格。😂

  16. 值品分享
    值品分享 @回复

    不怎么用表格。

  17. 狂放
    狂放 @回复

    学习了,TInyMCE功能不足啊

  18. 小苍老师
    小苍老师 @回复

    干货,学习了,晚上试试!

  19. 靠谱学生兼职网
    靠谱学生兼职网 @回复

    类似的,以前会收藏一下,但现在已经投奔ZB了……

  20. 夏日博客
    夏日博客 @回复

    可以直接在dw里面编辑好table,然后直接拷贝。

  21. 网赚乎博客
    网赚乎博客 @回复

    要说简单还是excel表格直接复制黏贴,要说最简单方便还是直接截图上传最方便。

  22. Mr.Li
    Mr.Li @回复

    自从学会了用markdown做表格,那酸爽

  23. 99八十一
    99八十一 @回复

    第二个插件tablepress用过,功能还是很强大的。不过还是卸载了,不想用插件,还是直接复制粘贴更方便,如果想修改可以直接修改代码。

  24. 跨境电商培训
    跨境电商培训 @回复

    非常不错!!!!

  25. 雅兮网
    雅兮网 @回复

    WordPress做表格确实比较欠缺,我是在主题里添加样式,用固定html来做表格

  26. 手机赚钱
    手机赚钱 @回复

    编辑器里的

  27. 银色月航
    银色月航 @回复

    传说中的老三?

  28. 学习笔记Blog
    学习笔记Blog @回复

    呵呵, Typecho 博客飘过,表格分分钟搞定,连编辑器模式都不用切换! [威武] [给力] [围观]

  29. 明月登楼
    明月登楼 @回复

    WordPress 编辑器的先天不足,造成表格插入成为一个老大的难题!所以我感觉 WordPress 原生支持 MarkDown 语法是当务之急! [偷笑]