服务器与VPS
促销优惠信息

利用CSS为wordpress加入表格 不用插件实现表格制作

随着楚狂人博客中文章的增加,我觉得需要在某些文章页面加入表格来更好的推荐与区分一些站点,可是wordpress的默认编辑器本身没有加入表格功能,于是楚狂人只好自己动手尝试wordpress表格制作了。

作为一个非程序员站长,想要做到这一点只有求助于百度和谷歌了,呵呵。经过一番搜索楚狂人找到了三个为wordpress加入表格的方法。

1、使用 TablePress 插件加入表格:
TablePress 是一款 WordPress表格管理插件,原名叫WP-Table Reloaded,后来由水景一页进行了修改和汉化。变得更加简洁和容易操作了,适合对表格要求较多,且不愿意麻烦操作代码的朋友使用。

TablePress 让你可以在 WordPress 管理后台创建和管理表格,不需要任何 HTML 编程知识。它的后台操作非常方便,可以轻松实现表格数据的编辑。还可以轻松的从 CSV、XML 或者 JSON 文件中导入数据来创建表格,也可以将表格导出为 CSV、XML 或者 JSON 文件。经过多次修改,TablePress 已经与 WordPress 实现了完美的整合。

2、使用Kindeditor For Wordpress插件加入表格:

Kindeditor 编辑器是一款简单高效,易于使用的编辑器,作者还特意将其制作了一个WordPress表格插件: Kindeditor for WordPress 。这款轻量级的编辑器插件功能十分强大:
有中文字字体可选
可选文字大小
有三页表情图标(共135个)
选项更加丰富的加入图片、flash、多媒体选项
方便的剪切、复制、粘贴等按钮
新增上标、下标、文字背景颜色、横线、blockquote等按钮。
最重要的是可以像操作word一样为wordpress加入表格。

楚狂人试用了一下,觉得这款插件完全可以满足一般博主给wordpress加入表格的需求,而且强化了编辑器功能,可谓一举两得,适合大多数wordpress站长使用。

3、利用CSS为wordpress加入表格:

此方法我在好几个网站内都看到有介绍,代码略有出入,大家都根据自己的偏好进行了修改,据说这个方法最早的原作者是万戈,再次表示一下敬佩和感谢。

首先,进入你的wordpress后台打开CSS文件,添加以下代码:

/*----------table----------*/
table.table {
border-spacing:2px;
border-collapse:collapse;
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;
}
然后在编辑文章时点击编辑器“文本”按钮,变为html编辑格式,然后在需要加入表格的地方,加入如下代码:
<table border="1" width="500" align="center">
<tbody>
<tr>
<td>第1行第1列</td>
<td>第1行第2列</td>
<td>第1行第3列</td>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
<td>第2行第3列</td>
</tr>
</tbody>
</table>
 效果如下:
第1行第1列 第1行第2列 第1行第3列
第2行第1列 第2行第2列 第2行第3列

 

经过测试,以上三种为wordpress加入表格的方法中第一种方法加入表格功能最强大,第二种方法加入表格最简便,第三种方法加入表格最轻灵。楚狂人更偏爱第三种利用代码给wordpress加入表格的方法,大家可以根据自己的情况选择其中一种即可。

楚狂人 » 利用CSS为wordpress加入表格 不用插件实现表格制作

相关推荐

  • 暂无文章

评论 5

  • (必填)
  • (必填)
  1. #0

    插件方便

    枫叶红秋雨11年前 (2013-06-14)回复
  2. #0

    不敢不敢,其实我也是代码盲,班门弄斧而已的

    楚狂人11年前 (2013-06-10)回复

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏