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

HTML 表格，曾經常用於網頁布局，現在是許多網頁設計師頭疼的布局。 表格通常在固定寬度下效果最好，這意味著它們可能會對其他像素完美的響應式網站設計造成嚴重破壞。 那麼WordPresser要做什麼？

與表有關的第一件事是謹慎使用它們。 表格應該用於表格數據，僅此而已。

不確定表格是否適合特定數據集？ 把它放到電子表格測試中。 這些數據在電子表格中是否有意義？

如果是這樣，HTML 表格是一個合適的選擇。 如果不是，請考慮使用列表或其他元素來呈現數據。

一旦你確定一張桌子是最好的選擇，然後呢？ 無論查看錶格的設備大小如何，都要確保它呈現精美。 說起來容易做起來難，對吧？

不要害怕。 在本教程中，您將了解五種不同的工具，您可以使用它們來使 HTML 表格具有漂亮的響應性。

繼續閱讀，或使用以下鏈接跳轉：

• WordPress 如何處理表格
• 手動使表響應
• 使用插件創建表
• 哪個是您的正確選擇？

WordPress 如何處理表格

這個問題沒有直接的答案。 WordPress 中表格的呈現方式因主題而異，因為表格樣式由每個主題附帶的 CSS 處理。

因此，表格是根據活動主題中包含的 CSS 規則呈現的。 切換主題和表格的呈現方式將會改變。

一些主題對響應式表格的內置支持比其他主題更好。 例如，TwentySixteen 可以很好地處理表，只要它們只有兩三列填充了短位數據。

然而，並非所有主題都像 TwentySixteen 那樣精心設計。

讓我們看看 TwentySixteen 在手持設備上呈現時如何處理 HTML 表格。 下面是一段 HTML，它將生成一個包含五列六行的表格。

它顯示了根據 W3Techs 最流行的內容管理系統。

當放入激活了 TwentySixteen 兒童主題的帖子時，該表在筆記本電腦或台式機顯示器上看起來相當不錯。 很明顯，TwentySixteen 包含深思熟慮的餐桌造型。

我們可以使用 Chrome 開發者工具設備模式來查看在較小設備上的外觀。

嗯，這並不理想。

TwentySixteen 開發人員確實包含了使表格響應的 CSS 樣式。 如果這個表只包含兩三列，它可能看起來還不錯。

但是，此表包含五列，這對於 TwentySixteen 中包含的默認表樣式來說太多了。

讓我們把這張桌子修好。

手動使表響應

我們要查看的第一個選項是手動修復，包括將 CSS 和 JavaScript 添加到主題中。 這聽起來可能很棘手，但實際上非常簡單。

為了使表格具有響應性，我們需要三件事：

• 格式正確的 HTML 表格。
• 一小段 JavaScript 代碼，用於將每個表格標題單元格與出現在同一表格列中的數據單元格相關聯。
• 當顯示縮小到預定寬度以下時，將觸發一個簡單的 CSS 規則集。 這一點 CSS 會將表格行重新排列成列，隱藏標題單元格的行，並將標題單元格的內容添加到每個數據單元格中。

重要的是要注意該表 必須 正確格式化以使其正常工作。

該腳本旨在尋找標題單元格 thead 元素並將它們作為 HTML 屬性分配給 a 中的數據單元格 tbody 元素。

如果您創建的表不包含 thead 和 tbody 代碼將不起作用的元素。

這是我們將使用的 JavaScript：

這是適用的CSS。

使用此代碼的最簡單方法是將其添加到表格出現的帖子或頁面中。 您可以通過在 style 標籤，並在 script 標籤。

如果您決定這樣做，請確保在將 JavaScript 放入文本編輯器之前將其縮小，否則 wpautop 函數會在腳本中添加分段符，從而在此過程中中斷它。

結果實際上非常好。 以下是在 Google Chrome 中使用 iPhone5 預覽時表格的外觀。

做表的更好方法

將 CSS 和 JavaScript 直接添加到帖子中不是 最好的 添加代碼的方法。

如果您只使用此代碼一次，將其添加到表格出現的帖子或頁面中就可以了。

但是，如果您要定期使用表格，添加代碼的更好方法是將其嵌入到主題文件中。

將代碼添加到您的主題確實並不難。 您只需四個步驟即可完成。

• 首先，確保您使用的是子主題，以避免在下次更新主題時丟失您的作品。
• 二、將CSS複製粘貼到主題的 樣式.css 文件。
• 第三，將 JavaScript 保存為單獨的文件並將其上傳到您的主題目錄。
• 四、使用 wp_enqueue_script 在您的主題中發揮作用 函數.php 文件以將 JavaScript 資源添加到您的主題，確保設置 in_footer 當你這樣做時為真。

該過程中最棘手的部分是添加腳本文件 wp_enqueue_script，但我可以使這一步更容易一些。

這是您可以添加到 函數.php 假設您是 JavaScript 文件，該文件會將 JavaScript 文件添加到主題中 響應式tables.js 並將其放在主主題目錄中。

您的 函數.php 文件可能看起來有點不同，但這讓您了解 enqueue 函數應該是什麼樣子。

WPMU DEV 作家和 WordPress 開發者 Daniel Pataki 介紹了 wp_enqueue_script 在此博客上深入發揮作用。 所以你可以參考那個教程——就像我做的那樣——如果你在這一步遇到困難。

完成所有四個步驟後，CSS 和 JavaScript 將在您網站的每個頁面上可用，並且網站上的任何錶格都將是響應式的。

做得好。

使用插件創建表

當然，也許您不想遇到所有這些麻煩，而只想使用 WordPress 表格插件。

在 WordPress 插件目錄中肯定有很多表格插件，其中許多聲稱可以使表格響應。

為了節省您的搜索時間，請查看我們關於選擇最佳 WordPress 表格插件的帖子，它比較了不同的響應式表格插件，這些插件可以很好地在任何尺寸的設備上呈現表格。

哪個是您的正確選擇？

嗯，這取決於。

你多久使用一次桌子？

您在 HTML 表格中呈現什麼樣的數據集？

您想要一個可以完成所有繁重工作的插件，還是喜歡親身體驗您網站的代碼？

您如何回答這些問題將有助於確定哪些工具適合您的 WordPress 網站。

• 您想要一個強大的表格工具來創建可排序和可搜索的複雜表格嗎？ 您是否處理想要在不破壞站點響應式設計的情況下使其可滾動的大型數據集和固定寬度的表格？ 然後選擇我們在這篇文章中審查過的插件之一。
• 您是否喜歡在代碼中四處尋找並想要一個資源較少且看起來很漂亮的手工解決方案？ 嘗試手動實現，並對其進行調整以使其成為您自己的。
• 您只是在尋找簡單的按鈕嗎？ 看看 Automatic Responsive Tables 或 Magic Liquidizer Responsive Table。 我敢肯定，這兩個中的一個會讓你開心。

表格不必在智能手機和平板電腦上看起來很糟糕。 稍加考慮和努力，您就可以在 WordPress 網站上使用 HTML 表格，並讓它們在每台設備上看起來都很棒。

標籤：

• 設計
• 響應表
• 表