一个热衷于科技的苦逼大学毕业生的博客。。。希望你喜欢!记得常来。

WordPress文章中添加自适应宽度的表格——墨涩网

其他分享 墨涩颓废 2个月前 (01-25) 267次浏览 已收录 0个评论 扫描二维码

WordPress文章中添加自适应宽度的表格——墨涩网

WordPress文章中添加自适应表格,前面写文章的时候需要用到表格来表达阵列信息,但是在WordPress添加表格不想是在office中那样方便,需要借助插件或者代码才可以实现,今天分享一个不需要安装插件纯代码实现WordPress文章中添加自适应表格的方法,表格可以实现文字字体居中色彩属性、自定义行数列数、插入图片等操作。

教程开始

WordPress编辑文章切换到文本编辑模式,将下面代码添加进去,并修改其中的文字:

<h3>自适应表格</h3>
<div class="table-r">
<table width="100%">
    <tbody>
        <tr>
            <td width="50%">自适应表格</td>
            <td width="50%">输入文字</td>
        </tr>
        <tr>
            <td width="50%">自适应表格</td>
            <td width="50%">输入文字</td>
        </tr>
    </tbody>
</table>
</div>

效果如下:

WordPress文章中添加自适应宽度的表格——墨涩网

一:如果想添加更多行。

多复制几个 <tr>...</td>这样的代码组合即可。

<h3>自适应表格</h3>
<div class="table-r">
<table width="100%">
    <tbody>
        <tr>
            <td width="50%">自适应表格</td>
            <td width="50%">输入文字</td>
        </tr>
        <tr>
            <td width="50%">自适应表格</td>
            <td width="50%">输入文字</td>
        </tr>
        <tr>
            <td width="50%">自适应表格</td>
            <td width="50%">输入文字</td>
        </tr>
        <tr>
            <td width="50%">自适应表格</td>
            <td width="50%">输入文字</td>
        </tr>
    </tbody>
</table>
</div>

效果如下:

WordPress文章中添加自适应宽度的表格——墨涩网

二:如果想对添加更多列。

上面是两栏自适应表格,如果需要多栏自适应表格,可以将代码中的“50%”修改成需要的数字。3栏修改成“33.33%”,四栏修改成“25%”等,以此类推即可,也可以设置不同的列宽度。

<h3>自适应表格</h3>
<div class="table-r">
<table width="100%">
    <tbody>
        <tr>
            <td width="25%">序号</td>
            <td width="25%">自适应表格</td>
            <td width="25%">输入文字</td>
            <td width="25%">备注</td>
        </tr>
        <tr>
            <td width="25%">序号</td>
            <td width="25%">自适应表格</td>
            <td width="25%">输入文字</td>
            <td width="25%">备注</td>
        </tr>
    </tbody>
</table>
</div>

效果如下:

WordPress文章中添加自适应宽度的表格——墨涩网

三:如果想修改文字字体、居中、色彩等信息。

可以在Wordpress的可视化编辑器中选择中需要修改的文字,直接在上方的文字属性栏设置即可。

WordPress文章中添加自适应宽度的表格——墨涩网

效果如下:

WordPress文章中添加自适应宽度的表格——墨涩网

四:如果想在表格中添加图片

可以在Wordpress的可视化编辑器中直接将光标插入需要插入图片的表格中,添加媒体图片即可。

WordPress文章中添加自适应宽度的表格——墨涩网

效果如下: WordPress文章中添加自适应宽度的表格——墨涩网

总体效果预览

WordPress文章中添加自适应宽度的表格——墨涩网


更多免费好用的资源/教程/源码请关注墨涩科技微信公众号(手机微信扫描下方二维码或者搜索“墨涩科技”) 墨涩颓废,版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明WordPress文章中添加自适应宽度的表格——墨涩网
喜欢 (2)
[990328865@qq.com]
分享 (0)
墨涩颓废
关于作者:
https://www.sunweihu.com站长
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

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