如何在沒有編碼的情況下在 WordPress 中創建高級 HTML 表格

WordPress 仍然是世界上最受歡迎的 CMS 平台，佔整個網絡 43% 的份額。 儘管 WordPress 無疑是最吸引人的功能之一，但在無需編碼的情況下創建 HTML 表格時，它不一定是最佳平台。

儘管許多人認為 HTML 表格已經過時，但它們仍然為觀眾提供了極好的價值。 結果，大多數用戶不得不為特定的“僅限開發人員”任務聘請專家。 考慮到目的，這對當時的 WordPress 用戶來說是一個很大的失望。

Gutenberg：帶有表格塊的 WordPress 默認編輯器

在 2017 年 7 月舉辦的歐洲 WordCamp 期間，WordPress 創始人 Matt Mullenweg 宣布 Gutenberg 塊編輯器是 WordPress 的未來編輯器。 令許多 WordPress 用戶高興的是，全新的編輯器承諾包含一個內置的表格塊。

然而，當 Gutenberg 推出 WordPress 5.0 時，該編輯器因在不同設備上造成響應和優化問題而受到批評。 儘管如此，編輯器確實按照承諾提供了一個內置的表格塊，使用戶能夠在他們的網站上創建表格而無需編寫代碼。

儘管 Gutenberg 表格塊是在 WordPress 上創建 HTML 表格的一個非常方便的選項，但它距離成為有效的表格構建器解決方案還有很長的路要走。 它不會提供最吸引人的外觀，不可重複使用，並且不擅長處理海量數據庫。

古騰堡只不過是一個簡單的表格構建器。 您不能將 Gutenberg 用於高級 HTML 表格功能，例如表格排序、過濾或樣式。 總而言之，Gutenberg 塊編輯器遠未成為高級表格構建器。

因此，像我們這樣的自由漫遊 WordPress 開發人員 WPManageNinja 需要創建一個插件，將高級表格功能添加到您的儀表板。

Ninja Tables：高級 HTML 表格 WordPress 插件

甚至在 Gutenberg 發布之前，我們 WPManageNinja 的開發人員就一直在不懈地努力開發一個可靠的 WordPress 表格插件，讓用戶可以輕鬆創建表格。

2018 年 2 月 27 日，我們在 WordPress 插件商店發布了 Ninja 表格，僅用了幾個月的時間，Ninja Tabes 的活躍安裝量就超過了 30000！ 我們用戶的難以置信的支持和讚賞也促使我們在第一次發布後不到 2.5 年的時間內發布了超過 45 個插件更新，使 Ninja Tables 成為該過程中排名第一的 WordPress 表格插件！

由於其動態功能和用戶友好的界面，Ninja Tables 現在被 70k 多個網站和企業使用。

Ninja Tables 是一個數據可視化插件，可讓您創建各種表格以在您的網站上展示。 將那些難以實現的高級 HTML 表格引入 WordPress 網站時，響應能力、功能、定制設施和第三方集成是您的最佳選擇。

現在，讓我們深入了解 Ninja Tables 最先進的 HTML 表格構建和自定義功能。

• 用戶界面
• 表格編輯器
• 集成

用戶界面

激活後，可以從 WordPress 儀表板的側邊欄中找到 Ninja Tables。 像大多數 WordPress 插件一樣，Ninja Table 提供了一個具有多種功能的 UI。 讓我們更多地了解它！

• 所有選項卡
• 工具和設置
• 幫助和文檔

主頁/所有表

Ninja Tables Home有一個吸引人的界面，提供新鮮的產品。 它為您提供了兩個按鈕，一個用於創建，一個用於導入。

創建您的第一個表按鈕將您帶到手動 WordPress 表構建器，而您也可以從 CSV 導入。

如果您決定從頭開始創建表格，它會要求您在彈出窗口中提供標題和說明。 您可能還會注意到其他幾個選項卡，它們提供了各種導入和集成功能。 但是，Ninja Tables 的免費版本只允許您通過 CSV 或 JSON 導入並與 WP Fluent Forms 集成。

提供Title和Description後，單擊Add按鈕訪問表構建器。 如果不需要，可以跳過描述框。

導入功能也以同樣的方式工作。 它允許您選擇一個 Excel 文件或您在計算機上創建的任何其他 CSV 文件，以上傳到您的網站。

無論哪種方式，您最終都會進入表格編輯器。 請注意，您創建的表是可重複使用的，並將顯示在主窗口中。 Ninja Tables 使用簡碼識別表格。 為了在您網站的帖子或頁面中使用表格，您只需將表格短代碼複製粘貼到您的頁面或帖子上。

工具和設置

除了主頁選項卡之外，Ninja Table 還包括一個工具和設置選項卡，使用戶能夠導入、修改全局外觀、設置用戶權限和更改全局設置。

如果您已經在使用任何其他流行的表格插件並已切換到 Ninja Table，則導入工具非常適合。 Ninja Table 為 TablePress、Ultimate Tables 和 Supsystic 的 Data Tables Generator 提供一鍵式表格導入功能。 您還可以在此選項卡中導入 CSV 文件。

接下來，全局外觀選項卡允許您更改表格樣式。 Ninja 表格可以使用三種不同的表格 UI 樣式即興創作您的表格。 您還可以根據自己的喜好自定義每種樣式，並選擇是否允許訪問者搜索和過濾您的表格。 但是，也可以為每個表單獨修改外觀規則。

不幸的是，除非您擁有 Ninja Tables 專業版，否則您無法為不同的後端用戶設置權限。 剩下的選項卡允許您選擇如何處理Javascript 錯誤並清除表緩存。

幫助和文檔

Ninja Tables 的廣泛功能需要可靠的文檔，我們的團隊已準備好您需要了解的有關 Ninja Tables 的所有信息。

我們的幫助和文檔界面提供了一份文檔完善的用戶指南，以深入了解 Ninja Tables 可以做什麼。 如果您仍然遇到任何問題，您可以隨時通過提交支持票聯繫我們！

現在您已經了解了 UI，您肯定想要創建一個表格！ 所以回到主頁開始創建一個吧！

表格編輯器

表格編輯器是 Ninja Tables 最令人興奮的功能之一。 它通過一些最先進的 HTML 表格構建器功能以及自定義來增強。 單擊“添加”或“導入”按鈕後，您將進入功能全面的 Ninja Tables 表格編輯器。

Ninja Tables 表構建器 UI 由上面顯示的部分組成。 每個表格構建器部分都有多個自定義功能來創建和設計漂亮的 WordPress HTML 表格。

您可以通過單擊頂部的“編輯”按鈕更改表格標題和描述並設置表格標題。 此外，Ninja Tables 表格構建器 UI 還允許您隨時預覽表格。

• 表格行
• 配置
• 設計
• 前端編輯
• 自定義 CSS
• 進出口

讓我們一一討論表構建器功能。

表行

表格行是 WordPress 上任何 HTML 表格構建器的基本方面之一。 正如它所說，您可以通過單擊“添加列”按鈕開始！

該按鈕將打開一個列創建窗口，該窗口授予 WordPress 上一些最高級的 HTML 表格功能。 Ninja Tables 不僅僅是一個具有平均列創建功能的基本表構建器； 遠不止於此。

因此，雖然您可以編寫列標題，但您還可以設置數據類型和響應斷點（響應斷點讓您選擇是否在特定設備上顯示列） 。

但是，免費版本限制了選擇字段、圖像和文件上傳，並且不允許您創建按鈕。 儘管如此，該插件仍具有一些令人難以置信的數據添加功能，例如HTML Field 、 Numeric Value和Date Field 。

如果您仍在尋找對錶格列的更多控制，您可以解鎖其他列自定義選項卡上可用的高級設置、條件設置和轉換值。 查看 Ninja Tables 文檔以獲取有關它們如何工作的更多信息。

添加表格列後，編輯器中將出現“添加數據”按鈕。 它使您可以毫不費力地將數據添加到您的網站。 您可以通過單擊列標題旁邊的齒輪圖標來單獨自定義列，並隨時編輯、複製或刪除數據！

最後，如果您的表格包含許多數據，表格行部分還可以讓您進行批量操作或設置緊湊視圖。

表配置

表配置選項卡提供拖放式列組織。 通常，HTML 表格一旦創建就無法在 WordPress 上進行組織。

在這方面，忍者桌不限制桌的組織。 可以通過拖放來組織表格行，同時您還可以創建新列或編輯現有列。

表格配置選項卡上的下一個選項卡允許您選擇渲染設置，即您希望瀏覽器如何渲染表格。 默認情況下，您的表格將使用Ajax 表格設置呈現。 此功能允許您在不損害網站速度的情況下合併海量數據庫。

雖然有兩個渲染選項，但除非您擁有專業版，否則您無法選擇高級表格設置。 高級表格可以合併一些最高級的表格字段，包括單元格邊距和簡碼，適用於 SEO 優化。

如果您想在表格中包含單選按鈕、複選框、日期選擇器或各種其他專用 UI，自定義過濾器是一個方便的功能。 如果您在表格單元格中顯示產品或添加更多數據，這些可以提供出色的轉換優化功能。 但是，自定義過濾器也是一項專業功能。

按鈕配置允許您包含打印或 CSV 導入按鈕（專業版功能）。 如果您有興趣為表格搜索欄、搜索佔位符或搜索下拉標題使用不同的語言，則語言設置非常有用。

表設計

Ninja Tables Table Design是一個令人難以置信的視覺定制器。 它具有三個樣式庫和多達九種樣式自定義功能，使您可以最大程度地可視化控制 WordPress 上的 HTML 表格。

除了樣式，您還可以選擇是否顯示表格標題、描述、搜索欄、列過濾器、標題行、邊框等。此外，您可以通過啟用Stackable Table Configuration來設置目標設備，使其不會中斷在任何設備上。

樣式確實在桌子的視覺吸引力中起著重要作用。 然而，顏色最重要。 Ninja 桌子在桌子顏色選項卡中提供完整的顏色定制。 您可以自定義從表格標題顏色到表格邊框的所有內容，並且對允許的顏色沒有限制。

如果您無法決定顏色定制，Ninja Table 為您的桌子提供了 13 種預定義的配色方案！ 但是，這個令人難以置信的功能需要高級版本。

剩下的表格設計選項卡具有各種自定義功能，例如分頁、搜索欄位置、排序方法，您可以為表格設計提供額外的 CSS 類。

前端編輯

前端編輯是 Ninja Tables 不僅僅是一個表格插件的另一個典型原因。 它允許您為前端用戶啟用編輯。 例如，如果您需要您的用戶填寫表格數據，您可以方便前端編輯。 但是，前端編輯功能僅在高級版本上可用。

自定義 CSS/JS

自定義 CSS 讓您可以控制 HTML 在 WordPress 上的外觀，並且在插件的情況下，它可以讓您控制您的表格。 雖然本文是為非編碼人員準備的，但了解 CSS 和 Javascript 可以讓您全面控制 Ninja Tables 的外觀。

進出口

同樣，導入功能允許您導入 CSV 文件或通過 CSV 替換現有表。 另一方面，導出功能將使您能夠將表格保存在 CSV 文件中。

集成

Ninja Tables 包含了在 WordPress 上輕鬆構建 HTML 表格的所有基本工具和功能。 但權力不僅限於建桌。 它不僅僅是一個表格插件，還帶有幾個令人難以置信的集成。 所有這些都提供一流的設施！

• Fluent 表單集成
• WP帖子
• WooCommerce
• 谷歌表格
• 忍者圖

流利形式集成

作為網站所有者，您可能會在您的網站上使用表單插件。 如果您想將表單條目放入表中怎麼辦？ Ninja Tables 使用您的表單條目來創建和顯示表格，除了設置表格之外，您無需執行任何操作。

WP Fluent Forms 是目前世界上最好的聯繫表單插件，如果您一直在使用該插件從您的受眾那裡收集數據，您可以將其放入您的 WordPress 表格中，而無需做太多事情。

WP 帖子集成

Ninja Tables 不僅將您的聯繫表格條目帶到表格中。 只需單擊幾下，它還可以將您的所有帖子、產品、頁面等組織到一個表格中。 如果您希望對帖子或產品進行分類，Ninja tables WP Posts 集成可以顯著減少您的工作。

WooCommerce 集成

WooCommerce 是最受歡迎的 WordPress 商店插件。 然而，大量使用 WooCommerce 的人也意味著他們中的很多人都提供相同的用戶體驗。 具有 WooCommerce 集成的 Ninja Tables 是一個傳奇插件，可以在您的網站上提供多樣性並在您的後端提供有效性。 它提高了轉化率，同時允許最直接的 WooCommerce 商店管理！ Ninja Tables 正是您管理 WooCommerce 商店所需要的。

谷歌表格集成

Ninja Tables 藏在袖子下的東西真是不可思議！ 你就是這麼想的，對吧？

也許，谷歌表格是任何 WordPress 插件可以提供的最佳集成選項之一。 Google Sheet 是最受歡迎的在線電子表格，具有最簡單的功能。 該網絡應用程序具有絕對世界級的功能，更重要的是，它可以從任何設備訪問！

Ninja Tables 可以連接任何谷歌表格，並在表格更新時在您的網站上顯示其數據。 因此，如果您需要在旅途中更新您的表格，Ninja Tables 谷歌表格集成絕對是一個大師班！

忍者圖表集成

表格處理數據。 我們依賴 WordPress 表格，因為它們向我們展示了統計數據。 然而，有時我們需要有一點創意，並發現以圖形方式來展示它們。 Ninja Charts 集成是生成表格數據可視化呈現的完美解決方案。 想看看你能用它做什麼？ 看看視頻！

包起來

有了 Ninja Tables，在 WordPress 上創建高級 HTML 表格的艱辛終於結束了！ 它是所有需要在放棄 HTML 代碼的同時顯示漂亮數據表的 WordPress 用戶的一站式解決方案。

因此，使用 Ninja Tables 製作桌子、增加參與度、提高轉化率並做更多的事情。

這就是今天的全部內容。 祝你一切順利。

合著者：努斯拉特·法裡哈

Nusrat 是 WPManageNinja 的一位創意內容作家，他喜歡研究不同的主題。 當她不寫作時，她可能正在閱讀她最喜歡的書！