如何在Shopify網站產品頁面中插入表格

Shopify編輯器中自帶的表格插入功能，只支持插入表格，以及對錶格行和列的添加刪除操作，如下圖，點擊表格圖標之後，可以Insert Table在產品描述中插入表格，然後再點擊Insert Row或者Insert Column插入更多的行或者列。

至於表格的樣式，繼承的則是你的Shopify主題中對錶格樣式的設置。如下圖，添加了一個表格之後，在移動端網站產品頁面前臺，可以看到表格的顯示樣式。（因爲目前網站移動端流量占主導地位，因此在查看錶格顯示樣式的時候，務必要查看移動端的顯示樣式，以保證足夠好的用戶體驗。）

Shopify自定義產品描述中的表格樣式

你如果懂CSS的話，可以通過修改主題的CSS文件來自定義表格的樣式。如果你不懂代碼的話，可以藉助第三方所見即所得在線編輯器工具來編輯表格的顯示效果。我試用了幾個在線編輯器之後，推薦 https://htmlg.com/html-editor/ 這個在線編輯器。

如下圖所示，打開編輯器之後，點擊插入表格選項，就可以在編輯器中按照你的需要插入表格，你可以在左側編輯器中編輯表格的內容以及顯示的樣式，編輯器右側會實時顯示左側表格所對應的HTML代碼。

點擊表格之後，在表格下方會有表格屬性以及表格插入行，插入列，合併單元格選項等等。點擊表格屬性，在General選項卡中，你可以調整表格的寬度，高度，單元格間距，表格以及單元格邊框，單元格文本居中還是居左右。在Advanced選項卡中可以設置邊框的背景顏色，邊框顏色，邊框的樣式。（關於顏色代碼的獲取可以使用 Colorzilla 直接獲取任意網頁內容的顏色，或者使用 https://htmlcolorcodes.com 獲取顏色代碼）

在上面的編輯器中設置好表格之後，將右側的代碼複製下來，然後在Shopify產品描述編輯選項中，點擊如下圖所示的HTML選項，然後將複製的代碼粘貼到合適的位置，保存即可。

按照個人的經驗，在設置表格寬度的時候注意一點。如果你的表格列不是很多，在移動端上能夠很完美的展現出來，如下圖所示，那麼建議在設置表格寬度的時候，選擇百分比值“100%”。設置100%的意思爲“自適應”。表格在實際顯示過程中，會依據屏幕的大小來自動調整表格的寬度。

但是如果你的表格內容有很多列，單個屏幕撐不下那麼多列內容的時候，如果表格寬度還是選擇100%，那麼表格內容則會因爲強制性的自適應全部顯示在屏幕上，而導致表格內容雜亂，影響用戶體驗。此時建議設置表格寬度爲具體的值，例如500px，而不是100%。這樣無論屏幕大小，表格都是以500px寬展示的，當屏幕無法完全展示表格內容時，會自動實現表格左右拖動的顯示效果。

如下圖圖2圖3和圖4的對比。

圖2只有3列內容，使用寬度100%自適應，表格會依據屏幕大小自動調整單元格的間距。圖3和圖4，都是9列內容。圖3使用了固定寬度500PX，雖然屏幕上只顯示了一部分數據，但是實際顯示效果是，表格內容是可以單獨左右拖動查看的。而圖4使用了自適應100%寬度，系統會將表格所有的內容都呈現在屏幕上，因此就會出現表格中單詞換行的現象，影響客戶的閱讀體驗。

當然，除了自己手動DIY表格顯示樣式之外，你也可以安裝Shopify APP，更輕鬆的自定義表格的樣式。我用“Table”這個關鍵詞搜索了下，找到了兩款APP，分別是TablePress，和DescriptionTable。

如果你要使用APP的話，從價格和評價上來看，我推薦TablePress，3天免費使用，費用1.99美金每月。40個5星好評。而DescriptionTable沒有試用期，一次性付費29.99美金，3個評價4.4星，從評價內容上看，DescriptionTable的售後服務做的不到位。

再或者，花5美金在Fiverr上找個人幫你寫個代碼也是可以的。