![8bb40aa3c929bc44476637a94e87c497.png](https://img-blog.csdnimg.cn/img_convert/8bb40aa3c929bc44476637a94e87c497.png)
WordPress文章中添加自适应表格,前面写文章的时候需要用到表格来表达阵列信息,但是在WordPress添加表格不想是在office中那样方便,需要借助插件或者代码才可以实现,今天分享一个不需要安装插件纯代码实现WordPress文章中添加自适应表格的方法,表格可以实现文字字体居中色彩属性、自定义行数列数、插入图片等操作。
教程开始
WordPress编辑文章切换到文本编辑模式,将下面代码添加进去,并修改其中的文字:
自适应表格
自适应表格 输入文字 自适应表格 输入文字
效果如下:
![882db43470f987897fbeb6c3e5e5e6a4.png](https://img-blog.csdnimg.cn/img_convert/882db43470f987897fbeb6c3e5e5e6a4.png)
一:如果想添加更多行。
多复制几个
...这样的代码组合即可。
自适应表格
自适应表格 输入文字 自适应表格 输入文字 自适应表格 输入文字 自适应表格 输入文字
效果如下:
![4f894901f7f3b3bdea91671aa78c6daf.png](https://img-blog.csdnimg.cn/img_convert/4f894901f7f3b3bdea91671aa78c6daf.png)
二:如果想对添加更多列。
上面是两栏自适应表格,如果需要多栏自适应表格,可以将代码中的“50%”修改成需要的数字。3栏修改成“33.33%”,四栏修改成“25%”等,以此类推即可,也可以设置不同的列宽度。
自适应表格
序号 自适应表格 输入文字 备注 序号 自适应表格 输入文字 备注
效果如下:
![8850e414d1ecda999b25f2307455509a.png](https://img-blog.csdnimg.cn/img_convert/8850e414d1ecda999b25f2307455509a.png)
三:如果想修改文字字体、居中、色彩等信息。
可以在Wordpress的可视化编辑器中选择中需要修改的文字,直接在上方的文字属性栏设置即可。
![91dc7b6ac48388770348da4caa6107e0.png](https://img-blog.csdnimg.cn/img_convert/91dc7b6ac48388770348da4caa6107e0.png)
效果如下:
![8f547ea5fdb5fc672b961f0b3c9f3848.png](https://img-blog.csdnimg.cn/img_convert/8f547ea5fdb5fc672b961f0b3c9f3848.png)
四:如果想在表格中添加图片
可以在Wordpress的可视化编辑器中直接将光标插入需要插入图片的表格中,添加媒体图片即可。
![66a8fa65957b143857d67f39d8c4798c.png](https://img-blog.csdnimg.cn/img_convert/66a8fa65957b143857d67f39d8c4798c.png)
效果如下:
![40864a8cf80d1c4510f8f63d970a0645.png](https://img-blog.csdnimg.cn/img_convert/40864a8cf80d1c4510f8f63d970a0645.png)
总体效果预览
![933f01993c09315a7e5951e2f585b475.png](https://img-blog.csdnimg.cn/img_convert/933f01993c09315a7e5951e2f585b475.png)