Contents
如何在WordPress文章插入表格
無論是產品規格說明,或產品內容標示,使用表格讓資料能夠更完整的表達。
商品A | 100元 | 有庫存 |
商品B | 150元 | 有庫存 |
例如上面這個表格是透過下面這串語法才能完成。
<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網頁瀏覽,將無法看到本文所示範的『表格』。
Lizxi 26 3 月, 2020
才剛在煩惱Wordpress怎麼放表格呢, 謝謝.
請問如果在表格裡加上外部連結是可以的嗎?
cybercats 28 3 月, 2020
Hi Lizxi,
當然可以,步驟如下:
1,將想要連結的文字反白
2,點擊迴紋針icon(插入/編輯連結)
3,跳出『插入連結』視窗
4,貼上連結網址,點擊『確定』
5,最後別忘了點擊右上方的『更新』鈕。