如何在WordPress文章插入表格

如何在WordPress文章插入表格
無論是產品規格說明,或產品內容標示,使用表格讓資料能夠更完整的表達。

商品A 100元 有庫存
商品B 150元 有庫存

例如上面這個表格是透過下面這串語法才能完成。

<table>
<tbody>
<tr>
<td>商品A</td>
<td>100元</td>
<td>有庫存</td>
</tr>
<tr>
<td>商品B</td>
<td>150元</td>
<td>有庫存</td>
</tr>
</table>

對於不懂HTML語法的人而言,製作表格簡直是地獄。
因此網頁上面的表格是使用美工圖上傳的?還是使用語法編寫出來的?網頁設計公司的功力即可高下立判。
使用繪圖軟體製作出來的表格,有如下缺點:
1.不利SEO:

Google有交代:請避免:將文字內容嵌入圖片或影片中,導致使用者無法剪貼這些文字,而搜尋引擎也無法讀取這些內容。


2.字跡模糊,用戶體驗NG!
3.智慧型手機等行動裝置瀏覽,更是糊成一團,慘不忍睹↓


↑辛辛苦苦做出來的比較表,沒人看得清楚,等於白搭。

前一篇文章介紹如何使用WordPress編輯器外掛TinyMCE Advanced編輯文章,『表格』是TinyMCE Advanced其中一項功能,因為難度較高,故另闢這篇文章做詳細說明。

如何在WordPress文章插入表格

1.  在編輯工具列找到『表格』圖示並點擊

2. 設定表格欄位數量

使用滑鼠在右側方塊滑動可設定欄位數量(2×5)

3.改變表格尺寸

使用滑鼠將表格拖曳至適當大小

4.輸入表格的內容

在表格內輸入表格內容。

如何設定表格顏色

1. 將表格反白

2. 使用表格格式

點擊『表格』圖示之『表格格式』,在『邊框』欄位輸入邊框的粗細(例如:3)

3. 『進階設定

設定表格邊框與表格背景的顏色

表格格式設定後,完成如下:

 表格格式  說明
①寬度  表格寬度
②高度  表格高度
③邊框  表格最外圍邊框
④對齊  表格位置:「無」「左」「置中」「靠右」

 

如何設定表格的『列』

此外還可針對表格的『列』的邊框與背景設定顏色。

將列反白,點擊『表格』圖示>列>列格式>設定顏色

設定後,顯示如下:

 表格格式  說明
①寬度  表格寬度
②高度  表格高度
③邊框  表格最外圍邊框
④對齊  表格位置:「無」「左」「置中」「靠右」

除了TinyMCE Advanced的『表格』功能外,其實還有很多製作表格的外掛插件,可以製作出更精美的表格,只要到 外掛>新增外掛 搜尋“tables”,會顯示一籮筐的表格製作外掛插件。
小編使用的外掛插件是:Data Tables Generator by Supsystic
<PS>若您是使用AMP網頁瀏覽,將無法看到本文所示範的『表格』。