不用插件css+html代码实现在WordPress中插入表格的效果

阿里云爆款云主机

安全、稳定、快速。限时优惠,低至3折

现在购买

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

楚狂人博客(chukuangren.com)见过几个建站博客都用表格方式放文字广告,自己也试过多种方法在WordPress文章里面插入表格,有代码也有插件的方式,各有利弊。wordpress作为博客系统来说,插入表格还是比较少用的。但也有朋友会有这个需求,今天看到苏醒博客的一个css+html代码实现在WordPress中插入表格的效果还不错,转载过来,有时间了可以再把博客折腾一下。

第一步:把表框css插入到你的主题的style.css中。

.table{width:100%;border-top:1px solid #d8d8d8;border-left:1px solid #d8d8d8;margin-bottom:20px}
.table th{text-align:center;background-color:#f6f5f2;font-weight:normal}
.table td,.table th{text-align:center;padding:10px 15px;font-size:14px;border-right:1px solid #d8d8d8;border-bottom:1px solid #d8d8d8}

第二步,你可以使用word文档,把你需要的表格编辑好,

不用插件css+html代码实现在WordPress中插入表格的效果

第三步:直接复制粘贴到你的文章里面去。

注意要在可视化模式下添加

不用插件css+html代码实现在WordPress中插入表格的效果

第四步:给表格添加css样式标签

切换到文本模式,给table添加一个样式class="table"

不用插件css+html代码实现在WordPress中插入表格的效果

最终效果

当然,你也可以根据自己的需要,对css进行一定的美化,让表格的样式更丰富,更美观。

不用插件css+html代码实现在WordPress中插入表格的效果

这个表格有什么用呢?嘿嘿,其实作为一个it博客,我们可以放光告的撒~~~~

未经允许不得转载:作者:楚狂人, 转载或复制请以 超链接形式 并注明出处 楚狂人博客
原文地址:《不用插件css+html代码实现在WordPress中插入表格的效果》 发布于2017-09-27

分享到:
赞(6) 打赏

评论 抢沙发

2 + 9 =


不用插件css+html代码实现在WordPress中插入表格的效果

长按图片转发给朋友

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

支付宝扫一扫打赏

微信扫一扫打赏

阿里云主机爆款活动
云服务器全场2折起,活动期间,用户通过本活动页面购买指定云产品,可享受相应的优惠折扣同一用户限购1单。
切换注册

登录

忘记密码 ?

切换登录

注册