如何在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上找个人帮你写个代码也是可以的。