现在的位置: 首页 > WordPress > 正文
简简单单 wordpress表格轻松插入
2012年04月02日 WordPress ⁄ 共 2282字 评论数 8 ⁄ 被围观 160 views+

wordpress表格制作妙招  wordpress插入表格五种方法简介

在写博客的时候,我们往往需要插入一些表格来证明自己的论点,比起文字,表格更加简洁、直观,数据表格很能说明文字,图形表格让效果更加直观,一个简单的表格效果往往比长篇大论更为有效。然而,遗憾的是,强大的WordPress 对表格的支持并不是很好,在后台编辑器中,很难方便的使用表格,本文将分享我所知道的4个在WordPress中插入表格的方法以及各自的优缺点供你选择,当然,如果你有什么更好的在WordPress中插入表格的方法,欢迎分享。

一、使用插件wp-table

wp-Table是一款适合表格初级应用的插件,你可以不懂任何HTML、CSS,就可以通过这个插件获得效果较好的表格,下面是这个插件制作的表格的实例图:

但是,这款wp-table插件并非完美,对于一些较为复杂的表格,比如需要链接描述等就不支持,而且,自从07年10月,插件作者就停止了对wp-table插件的开发和更新。

二、使用Word插入表格及CSS优化

WordPress 后台编辑器提供了一个“从word粘贴”的功能,同样的,我们可以先在word 做好了表格时候再通过此功能导入到文章中。

但是,你会发现,本来制作很精美的word表格插入到WordPress文章中以后,往往会变得丑陋、错位和缺乏样式。如果你熟悉CSS,当然可以轻松地修改,但对于普通blogger来说,就显得无从着手了。

这里提供一个由万戈提供了一个表格的CSS样式,你只需要在你的CSS文件中加上下面这段代码,然后将你在word或者Dreamweaver中制作好的表格导入到文章中,并加上一句class=”table”就行了。

  1. /*----------table----------*/
  2. table.table {
  3. border-spacing:2px;
  4. border-collapse:separate;
  5. background-color:#FFF;
  6. border-color:gray;
  7. border-style:outset;
  8. border-width:1px;
  9. }
  10. table.table th {
  11. background-color:#FFF;
  12. -moz-border-radius:0;
  13. border-color:gray;
  14. border-style:inset;
  15. border-width:1px;
  16. padding:1px;
  17. }
  18. table.table td {
  19. -moz-border-radius:0;
  20. border-color:gray;
  21. border-style:inset;
  22. border-width:1px;
  23. padding:1px;
  24. }

三、使用Windows live writer等离线编辑器

支持WordPress的离线编辑器大多支持插入表格,比如使用率较高的Windows live writer就是其中之一,Windows live writer不尽支持WordPress,也同样支持blogger、TypePad等博客程序。

下载一个客户端,尝试一下离线编辑吧,当然,你可能需要几天时间来适应它。

延伸阅读:

blog必备利器之离线写博客工具

10个Wordpress增强型编辑器

四、将表格制作成图片

这是一个偷懒却异常方便的方法,将你需要的表格做好之后,用截图工具或者其他转换工具将表格做成图片,并且以图片的方式插入到博客中,可以快速、方便的完成,并且保留你需要的任何漂亮的样式。

当然,弊端也是显而易见的,如果你对SEO很重视的话,这些图片样式的表格搜索引擎是看不懂的。

五、直接在文章中制作表格

这个方法来源于精博

这是一个无需修改style.css文件,而直接在文章中插入一段css代码,在文章中自定义表格样式的方法,相比修改style.css而言,这种方法的优势在于可以根据你的需要自定义你需要的不同的表格样式。当然,相比之下,每次都要插入并简单修改这些代码可能是一件比较麻烦的事。

步骤一:在文章开头加入下面代码

  1. <!--
  2. table.sample {
  3. border-width: 1px 1px 1px 1px;
  4. border-spacing: 2px;
  5. border-style: outset outset outset outset;
  6. border-color: gray gray gray gray;
  7. border-collapse: separate;
  8. background-color: white;
  9. }
  10. table.sample th {
  11. border-width: 1px 1px 1px 1px;
  12. padding: 1px 1px 1px 1px;
  13. border-style: inset inset inset inset;
  14. border-color: gray gray gray gray;
  15. background-color: white;
  16. -moz-border-radius: 0px 0px 0px 0px;
  17. }
  18. table.sample td {
  19. border-width: 1px 1px 1px 1px;
  20. padding: 1px 1px 1px 1px;
  21. border-style: inset inset inset inset;
  22. border-color: gray gray gray gray;
  23. background-color: white;
  24. -moz-border-radius: 0px 0px 0px 0px;
  25. }
  26. -->
  27. <table>
  28. <tbody>
  29. <tr>
  30. <th>Header</th>
  31. <td>Content</td>
  32. </tr>
  33. </tbody>
  34. </table>

步骤二:插入你的表格的标题和内容,调整样式大小。

 

来源:望月博客

 



  1. 最近空间快到期,也想换个空间,请问博主这个wordpress的博客主机空间,包年多少,在国内速度如何、



无觅相关文章插件,快速提升流量