在編輯器中新增表格

在網頁中製作表格時,為了確保在不同裝置(電腦、手機)上都能完整顯示,選擇正確的插入方式與設定「百分比寬度」是非常重要的技巧。本教學將帶您學習「編輯器直接插入 (RWD 滿版)」「加入範本 (可左右滑動)」兩種方法。

一、如何插入與設定表格 (RWD 滿版)

Step 1 開啟表格功能

開啟您想要編輯的後台頁面,在編輯器工具列中找到並點擊 「表格圖示」 表格圖示

點選表格位置

Step 2 設定表格屬性 (關鍵!)

在跳出的「表格屬性」視窗中,請進行以下重要設定:

  • 列數 / 行數:依照您的需求填寫。
  • 寬度:請務必設定為 100% (這樣才能自適應螢幕大小)。
🎨 美化小技巧:隱藏框線
如果您希望表格僅用於排版而不顯示線條,請將 「框線大小」的數字 1 改為 0 即可。
設定表格屬性

Step 3 填寫內容並儲存

返回編輯頁面後,您會看到一個表格框架。請依序在格子內填入文字或圖片,確認無誤後按下 儲存

填寫表格內容

Preview 前台顯示效果預覽

📱 手機版畫面 (Mobile):

因設定了寬度 100%,不管內容資訊有多少,表格都會自動縮放並滿版呈現,不會超出螢幕。

手機版呈現
💻 電腦版畫面 (Desktop):

在電腦螢幕上,表格同樣會依照視窗大小滿版呈現,視覺整齊大方。

電腦版呈現

二、如何使用「範本」快速插入表格

不想手動畫表格嗎?使用系統內建的「範本」功能,可以快速插入美觀且格式標準的表格。這種方式特別適合用於手機版需要「左右滑動」的長表格資料喔!

Step 1 點擊加入範本

開啟您想要編輯的後台頁面,點擊編輯器工具列上的 加入範本 按鈕。

點擊加入範本

Step 2 選擇表格類別

在彈出視窗的右上方下拉選單中,選擇 「表格」 項目。

選擇表格類別

Step 3 拖曳樣式

從右側選單中找到符合您需求的表格樣式,用滑鼠 拖曳 (Drag & Drop) 到左側的灰色編輯區塊中。

拖曳表格樣式

Step 4 完成新增

確認表格已成功放入編輯區後,點擊下方的 完成

點擊完成

Step 5 編輯內容並儲存

返回編輯頁面後,依序在格子內填入文字或數據。編輯完成後,請按下 儲存

編輯表格內容

Preview 前台顯示效果預覽

📱 手機版畫面 (Mobile):
💡 特色功能:
當表格寬度超出手機螢幕時,系統會自動啟用「左右滑動」效果,避免表格被擠壓變形,確保資料完整呈現。
手機版滑動效果
💻 電腦版畫面 (Desktop):

在電腦螢幕上,表格會依照裝置寬度滿版呈現,清楚易讀。

電腦版滿版效果