4種實現WordPress表格的方法，史上最全！

在做網站的時候，很多時候會用到wordpress表格，今天就來講下4種方法在網站上面加上wordpress表格

1.  最簡單的方法 - 複製excel表格然後貼上在wordpress頁面

這種方法適合很簡單的表格，最好是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，預覽跟實際的顯示結果是不一樣的，切記！

2. tablepress外掛實現wp網站表格

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

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

方法如下

先安裝和啟用，下面這一個外掛就沒錯

然後在wp後臺左側選單就可以看到tablepress了，點選import a table，匯入你準備好的EXCEL表格檔案，記住，它只讀取第一個excel表的內容。

選擇好你的excel檔案和檔案格式，點選import上傳

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

然後翻到頁面上面，複製這個shortcode，當然，也可以點選wp左側選單-tablepress - all tables裡面，檢視錶格的shortcode

然後把shortcode貼上在頁面的text block中，儲存後，update頁面，再重新整理前臺

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

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

3. 在第三方網站上實現wordpress表格

這個網站是http://www.tablesgenerator.com/html_tables

這種方法適合比較複雜的表格，並且帶響應式功能，而且可以對錶格進行美化。

操作方法如下

先複製做好的excel表格

然後進入http://www.tablesgenerator.com/html_tables

然後點選file - paste more data，在彈出的視窗中貼上表格

貼上完以後，再點選Load

就可以看到表格已經匯入了

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

然後點選右圖選單中的背景色，選擇一種背景色

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

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

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

然後選擇如下圖部分的程式碼，並複製，切記一模一樣的位置，不要多也不要少（即和之間的所有程式碼）

然後到wp後臺-avada- theme options - custom css中，另起一行，貼上上面複製的程式碼，並儲存。

然後再到這個頁面的程式碼框中，複製如圖所示的剩下的所有程式碼（拖到底再複製）

再到需要放程式碼的text block中，visual模式下，貼上程式碼 ，儲存。

重新整理前臺，就可以看到效果出來了。

4. 最直接的方法，擷取表格的圖片上傳

這種方法適用於任何表格，特別是複雜的表格，缺點就是表格內容不能選擇和複製

方法也簡單，先做好表格，並編輯好樣式，然後用QQ截圖（快捷鍵CTRL+ALT+A），把表格擷取然後儲存為英文名字的圖片

再上傳到media中，並在text block中插入圖片(注意在插入頁面選擇圖片的size為full size)即可。最終效果如下

以上就是4種實現Wordpress表格的方法，你可以根據實際情況選擇不同的方法來操作。原則就是把表格編輯成越簡單越好，這樣不僅好操作，還好排版。