WordPress文章中添加自適應(yīng)寬度的表格——墨澀網(wǎng)
WordPress文章中添加自適應(yīng)表格，前面寫文章的時候需要用到表格來表達(dá)陣列信息，但是在WordPress添加表格不想是在office中那樣方便，需要借助插件或者代碼才可以實現(xiàn)，今天分享一個不需要安裝插件純代碼實現(xiàn)WordPress文章中添加自適應(yīng)表格的方法，表格可以實現(xiàn)文字字體居中色彩屬性、自定義行數(shù)列數(shù)、插入圖片等操作。
教程開始
WordPress編輯文章切換到文本編輯模式，將下面代碼添加進去，并修改其中的文字：
<h3>自適應(yīng)表格</h3>
<div class="table-r">
<table width="100%">
<tbody>
<tr>
<td width="50%">自適應(yīng)表格</td>
<td width="50%">輸入文字</td>
</tr>
<tr>
<td width="50%">自適應(yīng)表格</td>
<td width="50%">輸入文字</td>
</tr>
</tbody>
</table>
</div>效果如下：
一：如果想添加更多行。
多復(fù)制幾個 <tr>...</td>這樣的代碼組合即可。
<h3>自適應(yīng)表格</h3>
<div class="table-r">
<table width="100%">
<tbody>
<tr>
<td width="50%">自適應(yīng)表格</td>
<td width="50%">輸入文字</td>
</tr>
<tr>
<td width="50%">自適應(yīng)表格</td>
<td width="50%">輸入文字</td>
</tr>
<tr>
<td width="50%">自適應(yīng)表格</td>
<td width="50%">輸入文字</td>
</tr>
<tr>
<td width="50%">自適應(yīng)表格</td>
<td width="50%">輸入文字</td>
</tr>
</tbody>
</table>
</div>效果如下：
二：如果想對添加更多列。
上面是兩欄自適應(yīng)表格，如果需要多欄自適應(yīng)表格，可以將代碼中的“50%”修改成需要的數(shù)字。3欄修改成“33.33%”，四欄修改成“25%”等，以此類推即可，也可以設(shè)置不同的列寬度。
<h3>自適應(yīng)表格</h3>
<div class="table-r">
<table width="100%">
<tbody>
<tr>
<td width="25%">序號</td>
<td width="25%">自適應(yīng)表格</td>
<td width="25%">輸入文字</td>
<td width="25%">備注</td>
</tr>
<tr>
<td width="25%">序號</td>
<td width="25%">自適應(yīng)表格</td>
<td width="25%">輸入文字</td>
<td width="25%">備注</td>
</tr>
</tbody>
</table>
</div>效果如下：
三：如果想修改文字字體、居中、色彩等信息。
可以在Wordpress的可視化編輯器中選擇中需要修改的文字，直接在上方的文字屬性欄設(shè)置即可。
效果如下：
四：如果想在表格中添加圖片
可以在Wordpress的可視化編輯器中直接將光標(biāo)插入需要插入圖片的表格中，添加媒體圖片即可。
效果如下： 
總體效果預(yù)覽
版權(quán)聲明：本文采用知識共享 署名4.0國際許可協(xié)議BY-NC-SA 進行授權(quán)
文章作者：<墨澀>
文章鏈接：
免責(zé)聲明：本站為資源分享站，所有資源信息均來自網(wǎng)絡(luò)，您必須在下載后的24個小時之內(nèi)從您的電腦中徹底刪除上述內(nèi)容；版權(quán)爭議與本站無關(guān)，所有資源僅供學(xué)習(xí)參考研究目的，如果您訪問和下載此文件，表示您同意只將此文件用于參考、學(xué)習(xí)而非其他用途，否則一切后果請您自行承擔(dān)，如果您喜歡該程序，請支持正版軟件，購買注冊，得到更好的正版服務(wù)。
本站為非盈利性站點，并不販賣軟件，不存在任何商業(yè)目的及用途，網(wǎng)站會員捐贈是您喜歡本站而產(chǎn)生的贊助支持行為，僅為維持服務(wù)器的開支與維護，全憑自愿無任何強求。
