wordpress内容编辑里如果要添加表格,需要用到表格插件,今天大挖给大家推荐一个免插件添加自适应表格的方法,只需要几行简单的代码添加辅助就可以完成。
首先,我们需要把wordpress编辑器切换到文本模式,之后将下面代码添加进去,并修改代码内的文字:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<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> |
如果我们需要添加更多行,就多复制几个:
1 2 3 4 |
<tr> <td width="50%">自适应表格</td> <td width="50%">输入文字</td> </tr> |
如果我们需要添加多列,就多复制几个
1 2 3 4 5 6 |
<tr> <td width="25%">自适应表格</td> <td width="25%">输入文字</td> <td width="25%">输入文字</td> <td width="25%">输入文字</td> </tr> |
同时我们需要注意到,在多栏自适应表格里
上面是两栏自适应表格,如果需要多栏自适应表格,width的宽度百分比是需要进行相应调整的,双列并排就宽度百度比设置为50%、三栏修改成“33.33%”,四栏修改成“25%”以此类推。
如果我们需要将表格内的文字进行居中操作,需要将下面的样式代码添加到wordpress主题名为style的css样式中。
1 2 3 |
.table-r td{ text-align: center; } |