如何在 WordPress 中創建響應式表格

表格是一種網站設計元素，可以幫助您以有組織的方式優雅地顯示大量信息。 它們在傳統計算機顯示器上運行良好，但在移動設備上通常會產生不良體驗。

幸運的是，有幾種可行的解決方案可用於創建更具響應性的表格。 使用這些響應式設計實踐可以改善您網站的用戶體驗 (UX)。 這意味著訪問者將能夠更輕鬆地查看和訪問表格中的數據，無論他們使用何種類型的設備。

在本文中，我們將了解使表格具有響應性意味著什麼。 然後，我們將介紹兩種在 WordPress 中創建響應表的方法。 讓我們開始吧！

什麼是響應表？

通常，表格的目標是以有意義的方式顯示大量數據。 然而，當您嘗試在移動設備上查看表格時，事情可能會出錯。 發生這種情況是因為表格行通常比屏幕顯示可以處理的列寬很多。

當您創建一個響應表時，您實際上是在為您的原始數據表創建一組規則。 這些規則可以根據顯示大小確定斷點。 這意味著如果用戶在小於您設置的斷點的設備上訪問表格，表格佈局將通過重新格式化以適應屏幕大小來響應。

響應式表格通常可以通過添加滾動條或堆疊信息來重新格式化。 您不希望隨著屏幕尺寸的變化而縮小並將單元格中的信息塞在一起，因為這會使表格不可讀。 幸運的是，響應式設計並不難實現。

如何製作響應式表格（無插件）

基本上有兩種方法可以在 WordPress 中使表格響應。 首先，我們來看看如何在沒有插件的情況下完成工作。

這將需要一些編碼知識：特別是對層疊樣式表 (CSS) 的理解。 我們還建議在暫存或開發環境中工作，而不是在您的實時網站上工作，直到您設計出可靠工作的表格。

第 1 步：為響應式 CSS 格式化表格

在此示例中，我們將告訴示例表的數據在特定斷點處重新格式化。 在某些情況下，您可以簡單地將滾動條添加到表格中，但我們將實際對錶格數據進行分組，使其以更具可讀性的格式顯示，從而消除了水平滾動的需要。

這是一個很好的方法，因為水平滾動通常意味著您正在脫離上下文查看列的數據：

為了使該表格更好地工作，您首先需要確保您的表格格式正確。 如果您使用塊編輯器創建表格，您可以正常執行此操作，然後添加 <thead> 和 <tbody> 屬性以確保您的 CSS 能夠正常工作：

添加表格後，您可以使用 HTML 編輯器調整其格式。 您的 <thead></thead> 屬性需要包裝所有列標題。 同樣，您會將所有後續表數據包裝在 <tbody></tbody> 屬性中。

一旦您在下一步中添加了 CSS 標記，您的樣式表將能夠理解什麼應該顯示為表中每一列的標題，以及什麼是正文或單元格內容。

第 2 步：向您的 CSS 添加自定義標籤

接下來，我們將使用一段自定義 CSS 代碼和 WordPress Twenty Nineteen 主題。 這個主題有一個相當響應式的設計作為其原生代碼的一部分，但我們的 CSS 調整將使它更進一步。

由於所有主題都不同，您需要徹底了解主題的結構，以便成功實施響應式表格設計。 某些主題可能需要額外的 JavaScript 庫。

對於我們的示例，我們將導航至Appearance > Customize > Additional CSS ，我們可以在其中添加以下自定義 CSS 代碼：

將自己的代碼粘貼到編輯器後，您需要選擇發布以使更改生效。

第 3 步：在 WordPress 中測試表格的響應能力

WordPress 有一個有用的內置屏幕測試功能，使您能夠在三種不同的屏幕尺寸上測試您的內容。 在添加自定義 CSS 的屏幕底部，您可以單擊平板電腦或手機圖標來測試表格的新樣式：

對於這個例子，我們已經創建了一個簡單的表格，其中包含所有必要的 HTML 屬性以使用我們的 CSS。 我們在 CSS 中的斷點設置為 600px，但可以根據您的需要進行更改。

我們添加的 CSS 沒有添加滾動條或壓縮表格數據，而是將數據重新組織為適合移動設備的格式。 這使移動設備上的用戶能夠垂直滾動，並在其餘相關單元格的上下文中查看表格數據。

如何使用插件製作響應式表格

如果您不習慣自定義主題的代碼或 CSS，還有另一種選擇。 有許多可用的 WordPress 插件可以幫助您為您的網站創建響應式表格設計。

第 1 步：下載插件

首先，您需要選擇一個插件。 由於設計響應式表格有很多選擇，我們將重點介紹一些以幫助您入門：

• Ninja Tables ：被標記為 WordPress 用於構建響應式表格的第一插件，它有超過 100 種表格樣式可供選擇。
• wpDataTables ：這是一個付費版的免費插件，但精簡版包含用於創建豐富的交互式表格和圖表的功能。
• WP Responsive Table ：這是一個簡單且免費的插件，可以輕鬆創建在小屏幕上水平滾動的響應式表格。

對於此示例的其餘部分，我們將使用 Ninja Tables 來演示如何在 WordPress 中創建響應式數據表。

第 2 步：輸入您的數據

安裝並激活插件後，您就可以直接開始創建表格。 您可以導航到NinjaTables > 所有表 > 添加表：

您可以在此處從頭開始添加新表，也可以從文件導入表。 我們將使用“添加表”選項從頭開始創建一個表。 然後，您需要為表格輸入標題和說明：

您在這裡還有其他一些選擇。 例如，如果您正在設置 WooCommerce 商店，您將能夠使用該信息來創建 WooCommerce 表格。

添加信息後，您將單擊“添加”以創建表格。 然後您需要開始輸入數據。 您可以選擇添加列來設置表的結構：

為了創建您的專欄，您需要完成幾個字段。 這包括列的標題名稱及其包含的數據類型。 您還可以設置其響應斷點：

要從確定您的表格如何響應不同設備的多個選項中進行選擇，您可以通過單擊Always show in all devices訪問菜單：

構建列後，選擇“添加數據” ，NinjaTables 將為您提供一個簡單的表單，以便您快速向表中添加多個條目：

如果您要輸入多個條目，則可以選中繼續添加選項。 完成後，您可以關閉窗口並返回到表格編輯屏幕。

第 3 步：格式化表格

現在您有了一個包含信息的表格，您可以探索 NinjaTable 的設置和样式選項。 在表格編輯窗口中，您可以通過頂部選項卡訪問更多設置，也可以在屏幕右側向下訪問：

您將有許多選項來自定義表格的樣式和外觀，包括交替表格行顏色、居中文本、隱藏數據等等。

第 4 步：測試您的桌子

NinjaTable 使您可以在編輯表格時輕鬆測試表格的響應能力。 在“表格設計”選項卡中，您會找到三個用於測試屏幕響應能力的選項：

您可以選擇Desktop 、 Tablet或Mobile來查看您的桌子在這些類型的設備上的外觀。

您創建的每個表還帶有一個簡碼。 此外，您可以使用位於“塊編輯器”菜單的“格式”部分中的 NinjaTable 塊輕鬆地將任何表格添加到您網站的內容中。

讓 WP Engine 幫助您保持網站響應

當您可以訪問正確的資源時，構建一個採用可靠響應式設計的網站並不一定是一個挑戰。

在 WP Engine，我們希望您能夠為您的客戶提供最佳的數字體驗。 查看我們為您的下一個項目提供的許多 WordPress 託管計劃和開發人員解決方案！