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

楚狂人博客(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文档,把你需要的表格编辑好,

在WordPress中插入表格-苏醒主题

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

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

在WordPress中插入表格-苏醒主题

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

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

在WordPress中插入表格-苏醒主题

最终效果

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

在WordPress中插入表格-苏醒主题

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

赞(6) 领红包
转载注明:楚狂人博客 » 不用插件css+html代码实现在WordPress中插入表格的效果

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

扫码领红包 或者 支付宝搜索:5981405

支付宝扫一扫打赏