https://boke112.com/4553.html/all

?

td, tr {border: 1px solid #000000;text-align: center;padding: 10px;}

?

在做 WordPress 網(wǎng)站的時(shí)候，很多時(shí)候文章中都會(huì)用到 table 表格，今天就來(lái)總結(jié)分享四種在WordPress 文章中插入 table 表格的方法。

一、最簡(jiǎn)單的方法：復(fù)制excel表格直接粘貼

這種方法適合很簡(jiǎn)單的表格，最好是2列的，優(yōu)點(diǎn)是簡(jiǎn)單，直接復(fù)制粘貼即可，短板就是表格很素，一點(diǎn)也不cool。

具體操作方法如下：

在 excel 編輯好表格之后，選中表格，并復(fù)制（多余的空格不要復(fù)制），然后粘貼到WP網(wǎng)站文章需要粘貼的位置，以 AVADA 主題為例，一般是粘貼到 text block 這個(gè) element 里面（文章編輯框內(nèi)），注意一定要粘貼在編輯器的visual（可視化）模式下，如下圖：

保存，update之后 ，刷新前臺(tái)頁(yè)面，可以看到表格了，不過(guò)沒(méi)有邊框，文字也不居中，如下圖：

需要加一些css代碼來(lái)設(shè)置邊框和文字居中，如下：

td,tr{border:1px solid #eee;text-align:center;padding:10px;}

將以上代碼加到網(wǎng)站后臺(tái) >> AVADA >> theme options >> custom css 中，然后保存。再刷新前臺(tái)，就可以看到好看多了。

其他操作

把表格中的文字加粗或加鏈接等操作，先選中文字，再進(jìn)行加粗等操作，非常簡(jiǎn)單。

注意：有的人會(huì)問(wèn)，為什么后臺(tái)那里是雙虛線，而前臺(tái)是實(shí)線，不一樣。原因是前后臺(tái)就是顯示不一樣，不用研究這個(gè)問(wèn)題，你只要保證前臺(tái)是你想要的效果就行了，后臺(tái)怎么樣一點(diǎn)也不重要！

另外，還有人做WP頁(yè)面，喜歡點(diǎn)預(yù)覽查看，不喜歡 Publish 或 update查看，這個(gè)操作也不對(duì)。有的時(shí)候網(wǎng)站有 Bug，預(yù)覽跟實(shí)際的顯示結(jié)果是不一樣的，切記！

二、tablepress?插件實(shí)現(xiàn)wp網(wǎng)站表格

Tablepress 是一個(gè)德國(guó)小伙子研發(fā)的WP插件，可以直接導(dǎo)入 excel表格來(lái)實(shí)現(xiàn)。它的基礎(chǔ)功能是可以免費(fèi)使用，但是如果要包含網(wǎng)站響應(yīng)式功能，就必須購(gòu)買付費(fèi)插件。要不要購(gòu)買看你自己。

注意：tablepress 不適合有合并單元格的表格，因?yàn)椴僮魈珡?fù)雜。由于免費(fèi)版本不含響應(yīng)式的功能，如果想免費(fèi)使用又想保證手機(jī)端能兼容的話，最好把表格做的簡(jiǎn)單一點(diǎn)再上傳（最好只有2列）。

具體操作方法如下：

1、先在后臺(tái)安裝和激活 TablePress 插件

2、在wp后臺(tái)左側(cè)菜單就可以看到 tablepress 了，點(diǎn)擊 import a table，導(dǎo)入你準(zhǔn)備好的 EXCEL 表格文件，記住，它只讀取第一個(gè) excel 表的內(nèi)容。

3、選擇好你的 excel 文件和文件格式，點(diǎn)擊 import 上傳

4、上傳完后，自動(dòng)跳轉(zhuǎn)到這個(gè)表格的編輯頁(yè)面，往下翻，找到 Features of the DataTables JavaScript library 這一項(xiàng)菜單，把下面的勾全部去掉，這些都是沒(méi)用的功能，然后 save changes。

5、翻到頁(yè)面上面，復(fù)制這個(gè) shortcode，當(dāng)然，也可以點(diǎn)擊wp左側(cè)菜單 >> tablepress >> all tables里面，查看表格的 shortcode。

6、把 shortcode 粘貼在頁(yè)面的 text block 中，保存后，update 頁(yè)面，再刷新前臺(tái)。

就可以在前臺(tái)看到表格了，這個(gè)看起來(lái)很cool，為什么左下角有一個(gè)edit呢，是因?yàn)槲乙呀?jīng)登錄了網(wǎng)站，所以它有這個(gè)提示。如果是訪客，是看不到這個(gè)edit的。

可以看下手機(jī)上面的以上兩種方法的效果，在手機(jī)端上還是很友好的顯示的。所以盡量把表格弄簡(jiǎn)單一點(diǎn)，特別是把列控制在2列，行數(shù)可以不限。這樣，就可以自動(dòng)的兼容在手機(jī)上顯示。

三、在第三方網(wǎng)站上實(shí)現(xiàn) wordpress?表格

比如這個(gè)第三方網(wǎng)站：http://www.tablesgenerator.com/html_tables，這種方法適合比較復(fù)雜的表格，并且?guī)ы憫?yīng)式功能，而且可以對(duì)表格進(jìn)行美化。

具體操作方法如下：

1、先復(fù)制做好的 excel 表格

2、進(jìn)入http://www.tablesgenerator.com/html_tables，點(diǎn)擊file - paste more data，在彈出的窗口中粘貼表格

3、粘貼完以后，再點(diǎn)擊Load

就可以看到表格已經(jīng)導(dǎo)入了。

4、選中最上面一行，方法是點(diǎn)擊第一個(gè)單元格，按住左鍵，往右拖

然后點(diǎn)擊右圖菜單中的背景色，選擇一種背景色

然后點(diǎn)擊文字顏色，將它變成白色，這樣比較諧調(diào)

最后的效果如下。當(dāng)然，其他的功能都可以使用，方法差不多，可以自己去摸索。

做好表格后，點(diǎn)擊表格下面的 generate 按鈕，然后再點(diǎn)擊 extra options 里面，點(diǎn)擊 make the able responsive，給表格加上響應(yīng)式功能。

然后選擇如下圖部分的代碼，并復(fù)制，切記一模一樣的位置，不要多也不要少（即<style>和</style>之間的所有代碼）

然后到wp后臺(tái) >> avada >> theme options >> custom css中，另起一行，粘貼上面復(fù)制的代碼，并保存。

然后再到這個(gè)頁(yè)面的代碼框中，復(fù)制如圖所示的剩下的所有代碼（拖到底再?gòu)?fù)制）

再到需要放代碼的text block中，visual模式下，粘貼代碼 ，保存。

刷新前臺(tái)，就可以看到效果出來(lái)了。

四、最直接的方法：截取表格的圖片上傳

這種方法適用于任何表格，特別是復(fù)雜的表格，缺點(diǎn)就是表格內(nèi)容不能選擇和復(fù)制。方法也簡(jiǎn)單，先做好表格，并編輯好樣式，然后用QQ截圖（快捷鍵CTRL+ALT+A），把表格截取然后保存為英文名字的圖片，再上傳到media中，并在text block中插入圖片(注意在插入頁(yè)面選擇圖片的size為full size)即可。最終效果如下:

以上就是四種在 WordPress 文章中插入表格的方法，你可以根據(jù)實(shí)際情況選擇不同的方法來(lái)操作。原則就是把表格編輯成越簡(jiǎn)單越好，這樣不僅好操作，還好排版。

?

總結(jié)

以上是生活随笔為你收集整理的在WordPress文章中插入表格的四种方法，史上最全的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。