WordPress 很强大,但是其编辑器却很简陋,可能 WordPress 依仗着自己有丰富的插件功能所以将后台的编辑器简化了吧。当然,一些简单的文字与图片输入对于 WordPress 编辑器来说是完全能够胜任的,但是如果要输入像表格这类稍稍复杂些的格式就要向 WordPress 投降了。虽然 WordPress 编辑器中有一项“从 Word 粘贴”的功能键,但是从 Word 中复制出来的表格粘贴在 WordPress 中就荡然无存了,就算是在 Dreamweaver 中编辑好的表格代码粘贴到 WordPress 编辑器的 HTML 格式下还是不能完美呈现。
要在 WordPress 中插入表格,其实并非难事,只要用 wp-table 插件就能轻松做到,但是如果我们一碰到问题就用插件解决,那 WordPress 迟早会被拖垮的。再次重申一下我的口号:能用代码搞定的就绝不用插件解决!所以本文对 wp-table 插件不作任何评价,有需要的朋友可以试试,本文的重点是介绍免插件在 WordPress 中插入表格的方法。
切入正题,和 用 caption 属性给图片加描述边框一样,要在 WordPress 中插入表格,我们只需要给表格定义一个 CSS 样式就行。参考代码如下:
/*----------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;
}
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;
}
在 WordPress 后台编辑器中插入表格时,只需用 Dreamweaver 之类的编辑器事先划好表格,再将代码粘贴至 HTML 格式下,并引用class="table",例如:
代码:
<table class="table" border="1" width="200" align="center">
<tbody>
<tr>
<td>第1行第1列</td>
<td>第1行第2列</td>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
</tr>
</tbody>
</table>
<tbody>
<tr>
<td>第1行第1列</td>
<td>第1行第2列</td>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
</tr>
</tbody>
</table>
效果:
| 第1行第1列 | 第1行第2列 |
| 第2行第1列 | 第2行第2列 |
更多表格效果请见文章:《Discuz! 代码制作个性论坛签名》。
这个方法是不是比插件更方便、更快捷、更一劳永逸呢?
-
正式向 DIV+CSS 进军2010年01月27日 -
合并JS文件两步走2009年06月13日 -
完美启用Gzip压缩JS、CSS2009年06月8日 -
用caption属性给图片加描述边框2009年06月4日
找到了,终于找到了,但是为啥边框还是不能显示呢? 但是将表格选择明明看得到边框的,松开就看不多了,全是白的~
Pingback: 如何在WordPress中插入word表格 | 大自然到底能否究诘呢?
Pingback: 5个在WordPress中插入表格的方法 - Miss·Cafe's Blog - ♥┊灬ToMoRroW Is AnThEr DaY!√^Θ^o οΟ
谢谢版主,正急找这个怎么解决呢!
Pingback: 5个在WordPress中插入表格的方法 | 逍遥阁
方法很独特,不再为不能插表格而发愁了
还是wp table 一键搞定较好!
Pingback: 不用插件实现wordpress插入表格 | Smilebull
正在找这个呢 谢谢万戈啦
我要做几百个格子。。疯了。。。。。敲代码得敲打哪年哪月啊。
Pingback: 5种将表格插入WP的方法 - 数据力量
谢谢楼主分享!
默认的表格样式还是有点难看的,将border-collapse:separate;中的separate改成collapse比较好看点
这个简单点 懂了
这个我会哈哈
用 window livewirter 可以很方便地插入表格。
同感~~~
這里不錯! 學習一下!
能用代码搞定的就绝不用插件解决!向万戈同志学习!
每天一学哦
又学习了一招!!呵呵
你这篇文章跟没写一样, 插入表格当然是...标签 - -..
哦?不用定义CSS就可以插入表格的吗?向你请教下
try again
有怪兽
嗯,我得试试那个插件哈哈……
喧宾夺主了,真不该介绍那个插件
还好没给出插件的链接,否则太便宜你了,嘿嘿
因为我之前真不知道有这么个插件~
插件其实是代码的抽象,方便代码的复用,毕竟每次更换主题之后重写页面文件,还是很头疼的事情
现在这个主题的代码已经被我改的面目全非了,我也不打算再换主题了,再改代码太麻烦。。。
博主,你好,请问,第一段代码加到什么位置呀?是粘贴到:编辑里的-样式表 (style.css)里吗?具体粘贴到什么位置里面都是代码我看不懂呀。谢谢博主,如能看见我的留言请帮帮我。
還沒機會用到...
我也是在写上一篇日志的时候遇到的这个问题,然后就顺便解决了,我对CSS比PHP要熟悉些,嘿嘿
直接用TD代码也可以啊
对了,万戈帮我看一下我现在这个访问IP,地址是不是北京的?
IP:218.30.117.3
北京市 电信IDC机房
呵呵,手机上google reader.方便的一塌糊涂~跑过来支持,我以前写游戏攻略什么的,表格直接复制黏贴,感觉没发现问题呀…晚上回去试试用div玩玩~
会不会你的主题样式表里已经有了表格的CSS呀,我的主题没有,所以得自己加进去
万戈兄最近热衷写教程。。
只是一些心得体会罢了,也是写给自己看的,说不定哪天换了主题,这些东西还得重新设置过,事先Mark一下
呵呵,又一个教程出线了