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

阿里云双十一活动

云服务器低至86元/年

立刻拼团

声明:本站文章多为楚狂人原创,偶尔网络转载部分内容,如有侵权请联系我们!

随着楚狂人博客中文章的增加,我觉得需要在某些文章页面插入表格来更好的推荐与区分一些站点,可是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插入表格 不用插件实现表格制作》 发布于2013-06-09

分享到:
赞(0) 打赏

评论 5

9 + 8 =
  1. #2

    插件方便

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

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

    管理员楚狂人7年前 (2013-06-10)回复
利用CSS为wordpress插入表格 不用插件实现表格制作

长按图片转发给朋友

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

支付宝扫一扫打赏

微信扫一扫打赏

每天拆双十一超级红包
双十一超级红包 1111

知道创宇云安全
切换登录

注册