在写博客的时候,我们往往需要插入一些表格来证明自己的论点,比起文字,表格更加简洁、直观,数据表格很能说明文字,图形表格让效果更加直观,一个简单的表格效果往往比长篇大论更为有效。然而,遗憾的是,强大的 WordPress 对表格的支持并不是很好,在后台编辑器中,很难方便的使用表格,本文将分享我所知道的几个在 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” 就行了。
/*----------table----------*/ table.table { border-spacing:2px; border-collapse:separate; background-color:#FFF; border-color:gray; border-style:outset; border-width:1px; } table.table th { background-color:#FFF; -moz-border-radius:0; border-color:gray; border-style:inset; border-width:1px; padding:1px; } table.table td { -moz-border-radius:0; border-color:gray; border-style:inset; border-width:1px; padding:1px; }
三、使用 Windows live writer 等离线编辑器
支持 WordPress 的离线编辑器大多支持插入表格,比如使用率较高的 Windows live writer 就是其中之一,Windows live writer 不仅支持 WordPress,也同样支持 blogger、TypePad 等博客程序。
下载一个客户端,尝试一下离线编辑吧,当然,你可能需要几天时间来适应它。
四、将表格制作成图片
这是一个偷懒却异常方便的方法,将你需要的表格做好之后,用截图工具或者其他转换工具将表格做成图片,并且以图片的方式插入到博客中,可以快速、方便的完成,并且保留你需要的任何漂亮的样式。
当然,弊端也是显而易见的,如果你对SEO很重视的话,这些图片样式的表格搜索引擎是看不懂的。
五、直接在文章中制作表格
这个方法来源于精博。
这是一个无需修改 style.css 文件,而直接在文章中插入一段 css 代码,在文章中自定义表格样式的方法,相比修改 style.css 而言,这种方法的优势在于可以根据你的需要自定义你需要的不同的表格样式。当然,相比之下,每次都要插入并简单修改这些代码可能是一件比较麻烦的事。
步骤一:在文章开头加入下面代码
<!-- table.sample { border-width: 1px 1px 1px 1px; border-spacing: 2px; border-style: outset outset outset outset; border-color: gray gray gray gray; border-collapse: separate; background-color: white; } table.sample th { border-width: 1px 1px 1px 1px; padding: 1px 1px 1px 1px; border-style: inset inset inset inset; border-color: gray gray gray gray; background-color: white; -moz-border-radius: 0px 0px 0px 0px; } table.sample td { border-width: 1px 1px 1px 1px; padding: 1px 1px 1px 1px; border-style: inset inset inset inset; border-color: gray gray gray gray; background-color: white; -moz-border-radius: 0px 0px 0px 0px; } -->
<table class="sample"> <tbody> <tr> <th>Header</th> <td>Content</td> </tr> </tbody> </table>
步骤二:插入你的表格的标题和内容,调整样式大小。
【相关】

评论
发表评论 反向链接