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

?

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

?

在做 WordPress 網站的時候，很多時候文章中都會用到 table 表格，今天就來總結分享四種在WordPress 文章中插入 table 表格的方法。

一、最簡單的方法：復制excel表格直接粘貼

這種方法適合很簡單的表格，最好是2列的，優點是簡單，直接復制粘貼即可，短板就是表格很素，一點也不cool。

具體操作方法如下：

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

保存，update之后 ，刷新前臺頁面，可以看到表格了，不過沒有邊框，文字也不居中，如下圖：

需要加一些css代碼來設置邊框和文字居中，如下：

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

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

其他操作

把表格中的文字加粗或加鏈接等操作，先選中文字，再進行加粗等操作，非常簡單。

注意：有的人會問，為什么后臺那里是雙虛線，而前臺是實線，不一樣。原因是前后臺就是顯示不一樣，不用研究這個問題，你只要保證前臺是你想要的效果就行了，后臺怎么樣一點也不重要！

另外，還有人做WP頁面，喜歡點預覽查看，不喜歡 Publish 或 update查看，這個操作也不對。有的時候網站有 Bug，預覽跟實際的顯示結果是不一樣的，切記！

二、tablepress?插件實現wp網站表格

Tablepress 是一個德國小伙子研發的WP插件，可以直接導入 excel表格來實現。它的基礎功能是可以免費使用，但是如果要包含網站響應式功能，就必須購買付費插件。要不要購買看你自己。

注意：tablepress 不適合有合并單元格的表格，因為操作太復雜。由于免費版本不含響應式的功能，如果想免費使用又想保證手機端能兼容的話，最好把表格做的簡單一點再上傳（最好只有2列）。

具體操作方法如下：

1、先在后臺安裝和激活 TablePress 插件

2、在wp后臺左側菜單就可以看到 tablepress 了，點擊 import a table，導入你準備好的 EXCEL 表格文件，記住，它只讀取第一個 excel 表的內容。

3、選擇好你的 excel 文件和文件格式，點擊 import 上傳

4、上傳完后，自動跳轉到這個表格的編輯頁面，往下翻，找到 Features of the DataTables JavaScript library 這一項菜單，把下面的勾全部去掉，這些都是沒用的功能，然后 save changes。

5、翻到頁面上面，復制這個 shortcode，當然，也可以點擊wp左側菜單 >> tablepress >> all tables里面，查看表格的 shortcode。

6、把 shortcode 粘貼在頁面的 text block 中，保存后，update 頁面，再刷新前臺。

就可以在前臺看到表格了，這個看起來很cool，為什么左下角有一個edit呢，是因為我已經登錄了網站，所以它有這個提示。如果是訪客，是看不到這個edit的。

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

三、在第三方網站上實現 wordpress?表格

比如這個第三方網站：http://www.tablesgenerator.com/html_tables，這種方法適合比較復雜的表格，并且帶響應式功能，而且可以對表格進行美化。

具體操作方法如下：

1、先復制做好的 excel 表格

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

3、粘貼完以后，再點擊Load

就可以看到表格已經導入了。

4、選中最上面一行，方法是點擊第一個單元格，按住左鍵，往右拖

然后點擊右圖菜單中的背景色，選擇一種背景色

然后點擊文字顏色，將它變成白色，這樣比較諧調

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

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

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

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

然后再到這個頁面的代碼框中，復制如圖所示的剩下的所有代碼（拖到底再復制）

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

刷新前臺，就可以看到效果出來了。

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

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

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

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。