在做網站的時候,很多時候會用到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,給表格加上響應式功能。

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

然后到wp后台-avada- theme options - custom css中,另起一行,粘貼上面復制的代碼,並保存。

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

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

刷新前台,就可以看到效果出來了。

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

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