Web 上的表格設計模式

已發表: 2022-03-10

快速總結↬表格是一種在行和列中顯示大量數據的設計模式，並且似乎還沒有失寵，所以讓我們看看 2019 年我們如何在 Web 上創建表格。

表格是一種用於在行和列中顯示大量數據的設計模式，使它們能夠有效地對分類對象進行比較分析。早在 2^世紀，桌子就已用於此目的，當世界開始數字化時，桌子就與我們一起出現了。

Web 不可避免地會支持以表格格式顯示數據。 HTML 表格以語義和結構適當的方式呈現表格數據。但是，HTML 表格的默認樣式並不是您見過的最美觀的東西。根據所需的視覺設計，需要在 CSS 前端做出一些努力來美化這些表格。十年前，一篇關於“十大 CSS 表格設計”的文章發表在 Smashing Magazine 上，直到今天它仍然繼續獲得大量流量。

在過去的十年中，網絡發生了很大的變化，讓您的網站或應用程序適應它所查看的視口比以往任何時候都更加方便。話雖如此，我們必須繼續做出考慮周全的設計選擇，而不是妥協可訪問性。由於表格似乎不會很快失寵，讓我們看看 2019 年如何在 Web 上創建表格。

跳躍後更多！繼續往下看↓

僅 CSS 選項

如果您的數據集不是那麼大，並且不需要分頁和排序等功能，那麼請考慮使用無 JavaScript 選項。您可以獲得一些非常好的結果，這些結果在整個屏幕尺寸範圍內都能很好地工作，而不會增加大型庫的重量。

不幸的是，如果沒有 JavaScript 在可訪問性方面的一些 DOM 操作的幫助，我們只有少數 CSS-only 選項。但對於小型數據集，它們通常就足夠了。

選項 1：什麼都不做

我們將從一個省力的場景開始。如果您的數據適合只有幾列和很多行的表，那麼這樣的表幾乎可以開始移動。

在窄屏和寬屏上顯示的少列多行的表格 — 在窄屏和寬屏上顯示幾列多行的表格（大預覽）

您遇到的問題可能是在較寬的屏幕上空間太大，因此建議使用max-width “限制”表格的最大寬度，同時讓它在窄屏幕上根據需要縮小。

請參閱 CodePen 上的 Pen Table #1: Few columns, many rows by (Chen Hui Jing)。

如果您的數據本身不是文本行和文本行，則這種模式效果最好。如果它們是數字或短語，你可能不用做太多就可以僥倖逃脫。

選項 2：設置捲軸樣式

David Bushell 早在 2012 年就編寫了他的響應式表格技術，其中涉及調用溢出並允許用戶滾動查看更多數據。有人可能會爭辯說，這並不完全是一種響應式解決方案，但從技術上講，容器正在響應視口的寬度。

以用戶知道滾動上有更多數據的方式設置表格樣式。 — 設置表格樣式時，允許用戶滾動查看更多數據。（大預覽）

讓我們先看一下“基本”溢出。想像一下我在基本周圍使用空氣引號，因為滾動陰影的樣式絕不是。儘管如此，在這種情況下，“基本”是指表格不會以任何方式轉換的事實。

請參閱 CodePen 上 Chen Hui Jing 的 Pen Table #3: Style the scroll (basic)。

這種滾動陰影的技術來自於 Roma Komarov 和 Lea Verou，他們相互借鑒彼此的想法來創造魔法。它依賴於使用多個漸變（線性和徑向）作為包含元素上的背景圖像，並使用background-attachment: local來相對於其內容定位背景。

這種技術的好處在於，對於不支持滾動陰影的瀏覽器，您仍然可以正常滾動表格。它根本不會破壞佈局。

另一個滾動選項是將表格標題從行配置翻轉到列配置，同時對<tbody>元素的內容應用水平滾動。此技術利用 Flexbox 行為將表的行轉換為列。

請參閱 CodePen 上 Chen Hui Jing 的 Pen Table #3: Style the scroll (flipped headers)。

通過將display: flex應用於表格，它使<thead>和<tbody>都是 flex 子項，默認情況下它們在同一條 flex 行上彼此相鄰。

我們還使<tbody>元素成為一個 flex 容器，從而使其中的所有<tr>元素也成為一個 flex 子元素，它們也佈置在一個 flex 行中。最後，每個表格單元格都必須將其顯示設置為block而不是默認的table-cell 。

這種技術的優點是標題始終在視圖中，就像固定的標題效果一樣，因此用戶在滾動數據列時不會丟失上下文。需要注意的一點是，這種技術會導致視覺和源順序的差異，這使得事情有點不直觀。

撒上一些 JavaScript

如前所述，涉及通過修改display值來變形表格的佈局選項有時會對可訪問性產生負面影響，這需要一些小的 DOM 操作來糾正。

此外，Andrew Coyle 在設計數據表時提供了許多用戶體驗提示，包括分頁、排序、過濾等功能（確實需要一些 JavaScript 才能啟用的功能）。

如果您使用的是相對簡單的數據集，也許您想為其中一些功能編寫自己的函數。

行到塊，具有可訪問性修復

據我所知，這種響應式數據表技術源自 Chris Coyier 在 2011 年撰寫的 CSS-Tricks 文章“響應式數據表”。此後，許多其他人對其進行了改編和擴展。

這種技術的要點是利用媒體查詢來切換錶格元素及其子元素的顯示屬性，以block在狹窄的視口上。

在狹窄的屏幕上，表格標題在視覺上是隱藏的，但仍存在於可訪問性樹中。通過將數據屬性應用於表格單元格，我們可以通過 CSS 顯示數據的標籤，同時將標籤的內容保留在 HTML 中。有關標記和样式的外觀，請參閱下面的 CodePen：

請參閱 CodePen 上 Chen Hui Jing 的 Pen Table #2: Rows to blocks。

原始方法在顯示標籤文本的偽元素上應用寬度，但這意味著您需要知道標籤開始所需的空間量。上面的示例使用了一種稍微不同的方法，標籤和數據分別位於其包含塊的相對兩側。

我們可以通過 flex 格式化上下文中的自動邊距來實現這樣的效果。如果我們將每個<td>元素的 display 屬性設置為 flex，因為偽元素會生成盒子，就好像它們是其原始元素的直接子元素一樣，它們將成為<td>的 flex 子元素。

之後，在偽元素上設置margin-right: auto以將單元格的內容推送到單元格的遠端邊緣。

另一種進行窄視口佈局的方法是使用 Grid 和display: contents的組合。請注意，支持瀏覽器中的display: contents目前存在可訪問性問題，在修復這些錯誤之前，不應在生產中使用此方法。

但也許您在解決這些錯誤後正在閱讀本文，在這種情況下，這裡有一個替代佈局選項。

請參閱 CodePen 上 Chen Hui Jing 的 Pen Table #2: Rows to blocks (alt)。

每個<tr>元素都設置為display: grid ，每個<td>元素都設置為display: contents 。只有網格容器的直接子級參與網格格式化上下文；在這種情況下，它是<td>元素。

當display: contents應用於<td>時，它會被其內容“替換”，在這種情況下， <td>中的偽元素和<span>會變成網格子元素。

我喜歡這種方法的地方在於能夠使用max-content來調整偽元素列的大小，確保該列始終是最長標籤的寬度，而無需我們手動為其分配寬度值。

將來，當min-content 、 max-content和fit-content的尺寸值（由 CSS Intrinsic & Extrinsic Sizing Module Level 3 涵蓋）被支持為通用width和height值時，我們將有更多的佈局選項東西出來。

這種方法的缺點是您確實需要在表格單元格中的內容周圍添加額外的<span>或<p> （如果它還沒有的話），否則，將無法對其應用樣式。

簡單分頁

這個例子展示了一個基本的分頁實現，它是由 Gjore Milevski 在這個 CodePen 上修改的，用於對錶行而不是 div 進行分頁。它是上一節中討論的“樣式滾動”示例的擴展。

請參閱 CodePen 上的 Pen Table #4: Simple pagination by Chen Hui Jing。

從佈局的角度來看，Flexbox 非常方便地將分頁元素定位到各種視口大小。不同的項目設計會有不同的要求，但 Flexbox 的多功能性應該可以讓您相應地滿足這些差異。

在這種情況下，分頁以頁面為中心並位於表格上方。在較寬的屏幕上，用於向後和向前導航的控件位於頁面指示器的兩側，但在窄屏幕上，所有四個都顯示在頁面指示器的上方。

我們可以通過利用order屬性來做到這一點。內容的視覺重新排序應始終考慮在內，因為此屬性不會更改源順序 - 只會更改它在屏幕上的顯示方式。

簡單排序

這個例子展示了一個基本的排序實現，由 Peter Noble 修改了這個代碼片段，以適應文本和數字：

請參閱 Pen #Table 5：Chen Hui Jing 在 CodePen 上的簡單排序。

有某種指示符來指示當前正在對哪一列進行排序以及按什麼順序排序會很有用。我們可以通過添加 CSS 類來做到這一點，然後可以根據需要設置樣式。在這種情況下，指標符號是在單擊目標標題時切換的偽元素。

簡單搜索

這個例子是一個基本的過濾功能，它遍歷每個表格單元格的所有文本內容，並應用一個 CSS 類來隱藏所有與搜索輸入字段不匹配的行。

請參閱 CodePen 上的 Pen Table #6: Simple filtering by Chen Hui Jing。

這樣的實現相對幼稚，如果您的用例需要它，那麼按列搜索可能是有意義的。在這種情況下，將每個輸入字段作為各自列中表的一部分可能是一個好主意。

讓圖書館處理它

上面的 JavaScript 片段用於演示如何增強具有大量數據的表，以使這些表的用戶更輕鬆。但是對於非常大的數據集，使用現有的庫來管理大型表可能很有意義。

列切換模式是一種將非必要列隱藏在較小屏幕上的模式。通常，我不喜歡僅僅因為視口狹窄就隱藏內容，但是 Filament Group 的 Maggie Costello Wachs 的這種方法通過提供一個下拉菜單來解決我的疑慮，該菜單允許用戶將隱藏的列切換回看法。

上述文章發表於 2011 年，但 Filament Group 此後開發了一整套稱為 Tablesaw 的響應式表格插件，其中包括排序、行選擇、國際化等功能。

TableSaw 中的列切換功能也不再依賴於 jQuery，這與原始文章中的示例不同。 Tablesaw 是目前我能找到的唯一一個不依賴 jQuery 的庫之一。

包起來

有無數的表格設計模式，您選擇哪種方法在很大程度上取決於您擁有的數據類型和該數據的目標受眾。歸根結底，表格是一種組織和呈現數據的方法。重要的是要弄清楚哪些信息對您的用戶最重要，並決定最能滿足他們需求的方法。