Data tables are hard. There are many different ways to think about them. So, naturally, the first step would be to figure out what your users need.

數據表很難。 有許多不同的方式來考慮它們。 因此，自然地，第一步就是弄清楚用戶的需求。

• Do they want to see as much information as possible?
  他們想看到盡可能多的信息嗎？
• Do they want to compare the information?
  他們是否想比較信息？
• Do they want to execute actions quickly?
  他們想快速執行動作嗎？
• Do they want to view only and export the table to Excel?
  他們是否只想查看并將表格導出到Excel？

Depending on that you should think, what functionality and design choices make these tasks easiest to do.

根據您的想法，什么功能和設計選擇會使這些任務最容易完成。

視覺效果 (Visuals)

Table design should be as minimalistic as possible. Adding elements without reason will increase eye strain and reduce readability. After all, we are designing a tool.

表設計應盡可能簡化。 無故添加元素會增加眼睛疲勞并降低可讀性。 畢竟，我們正在設計工具。

色彩 (Colors)

Data tables should have as few colors as possible. You can specify one for negative and positive trends and the header. This way elements that need to be seen can be seen, but they won’t add excessive clutter.

數據表應具有盡可能少的顏色。 您可以為負趨勢和正趨勢以及頁眉指定一個。 這樣就可以看到需要查看的元素，但不會增加過多的混亂。

Font and border colors should not be black. Opt for dark grays for fonts and light grays for borders as they reduce eye strain and won’t make the table look as daunting.

字體和邊框顏色不能為黑色。 為字體選擇深灰色，為邊框選擇淺灰色，因為它們可以減少眼睛疲勞，并且不會使桌子看起來令人生畏。

分頻器 (Dividers)

Having dividers is not always necessary. Add them if extra clarity is required.

不一定總是需要分隔線。 如果需要額外的說明，請添加它們。

It’s very popular to have only horizontal dividers. It leaves a clean, relatively spacious look. Opt for vertical dividers, when you have many columns and they get too close together.

只有水平分隔線非常流行。 留下干凈，相對寬敞的外觀。 當您有很多列并且它們之間的距離太近時，請選擇垂直分隔線。

With smaller, less dynamic tables, you can leave out all dividers and get a striking look. This, of course, is more for beauty projects rather than tools.

對于較小的，動態性較小的表，您可以省去所有分隔線，并獲得醒目的外觀。 當然，這更多是針對美容項目而非工具。

If it becomes hard to follow rows (or following them is what users do a lot) you can always separate them with either borders or alternating colors. Making your borders gray will reduce eye strain significantly. Also, if your tables don’t have many rows, alternating colors might make people think that highlighted rows have special meaning.

如果很難跟隨行(或者跟隨行是用戶經常做的事情)，則始終可以使用邊框或交替的顏色來分隔行。 使邊框變灰會大大減少眼睛疲勞。 另外，如果表中沒有很多行，則交替顯示的顏色可能會使人們認為突出顯示的行具有特殊含義。

One less conventional way to separate rows is by highlighting rows with hover effects. This will look great, but it won’t bode well with mobile users as they don’t have a mouse to hover with and power users who might want to use their cursor for other purposes.

一種不常見的分隔行的方法是突出顯示具有懸停效果的行。 這看起來不錯，但對于移動用戶而言并沒有好兆頭，因為他們沒有鼠標懸停在上面，也無法吸引可能希望將光標用于其他目的的用戶。

空格，行高 (White space, line-height)

Adding white space will increase readability and most users are happy to scroll more for that perk.

添加空白將提高可讀性，并且大多數用戶都樂于為該特權滾動更多內容。

Lower line-height means having more info on the screen at the cost of readability. Too long line-height will make it hard to compare rows. If you are feeling extra fancy, you can have buttons that change the line-height to accommodate everyone’s needs.

較低的行高意味著以可讀性為代價在屏幕上顯示更多信息。 行高過高將使比較行變得困難。 如果您感覺特別花哨，可以使用一些按鈕來更改行高，以適應每個人的需求。

版式 (Typography)

Alignment

對準

Generally, you should align text left and numbers right. This way it’s easier to differentiate between the two and numbers are easier to compare. In addition to that, you should align the table headers according to their column data as that makes your table more structural.

通常，您應該將文本左對齊，將數字右對齊。 這樣，更容易區分兩者，并且更容易比較數字。 除此之外，還應根據表頭的列數據對齊表頭，因為這會使表更具結構性。

When your table has cells with multiple lines of content (eg subtitle or description) you should align cell content to top. Otherwise, you may have cells where the text starts from the second line, relative to cells with multiple lines. This will reduce the structure of the table.

如果表格中的單元格包含多行內容(例如，字幕或說明)，則應將單元格內容對齊到頂部。 否則，相對于多行單元格，您可能會有單元格從第二行開始。 這將減少表的結構。

Tabular numbers

表格編號

Tabular numbers are designed so that every digit takes up the same amount of space. This is very useful in table design as tabular numbers are very easy to compare.

表格編號的設計目的是使每個數字占用相同的空間。 這在表格設計中非常有用，因為表格數字很容易比較。

Digits like dates should be formatted in a way that they are always the same length. For example instead of 16/4/2020 you use 16/04/2020.

像日期這樣的數字應采用始終相同的長度進行格式化。 例如，您使用16/04/2020而不是16/4/2020。

功能性 (Functionality)

Often you don’t need to add dozens of features to your table. Tables are already filled with information and unnecessary features add only clutter.

通常，您不需要在表中添加許多功能。 表格已經充滿了信息，不必要的功能只會增加混亂。

When choosing what functionality to add, you must know what the end-users expertise is. Ask yourself if they can manage all the data manipulation tools you want to add.

選擇要添加的功能時，您必須知道最終用戶的專業知識。 詢問自己是否可以管理您要添加的所有數據處理工具。

In addition to that, important functionality must be easy to access. For example, having buttons at the end of each long row might prove to require a lot of cognitive effort as users will have to follow the row accurately.

除此之外，重要的功能必須易于訪問。 例如，在每個長行的末尾都有按鈕可能會證明需要大量的認知努力，因為用戶將必須準確地跟隨行。

Here are some examples of functions to spark creativity:

以下是一些激發創造力的函數示例：

排序和過濾 (Sorting and filtering)

Sorting and filtering are almost always justified. Unless you are making a fancy table for less than 10 items, sorting and filtering will simplify almost any task.

排序和過濾幾乎總是合理的。 除非您制作的花式表少于10個，否則排序和過濾將簡化幾乎所有任務。

Sorting should present users with logical ordering rules — alphabetical, edit time, insert time, or any other that makes sense in their specific use case.

排序應為用戶提供邏輯排序規則-字母順序，編輯時間，插入時間，或在其特定用例中有意義的任何其他規則。

You can implement sorting in two ways. First would be to put a button above the table which will open up a modal where the user inputs their sorting logic. The second one would be to have sorting buttons by the headers of columns that support sorting. Additionally, you can add a hover effect that will show an explanation.

您可以通過兩種方式實現排序。 首先是在表格上方放置一個按鈕，這將打開一個模式，用戶可以在其中輸入其排序邏輯。 第二個是通過支持排序的列標題設置排序按鈕。 此外，您可以添加將顯示說明的懸停效果。

可調整大小的列 (Resizeable columns)

Resizeable columns are good if the length of data in the same column may vary. Other than that, with more static tables, it may simply complicate things for no big reason.

如果同一列中的數據長度可能會變化，則可調整大小的列會很好。 除此之外，有了更多的靜態表，它可能沒有什么大的理由就使事情復雜化。

可自定義的列 (Customizable columns)

If comparing data in the same row is important, being able to reorder the columns or hide unnecessary ones will be a powerful tool.

如果比較同一行中的數據很重要，那么能夠對列進行重新排序或隱藏不必要的列將是一個強大的工具。

If it seems unreasonable to invest time and money into implementing this, then make sure to pay close attention to the order of your columns.

如果花費時間和金錢來實現此目標似乎不合理，則請確保密切注意各列的順序。

可擴展行 (Expandable rows)

This feature can add a lot of dimension to your tables. Instead of having more columns you can show elements in greater detail in a modal window or an accordion. This way users can get important data quickly but can dig deeper if required.

此功能可以為表增加很多維度。 您可以在模式窗口或手風琴中更詳細地顯示元素，而不必增加列數。 這樣，用戶可以快速獲取重要數據，但需要時可以進行更深入的挖掘。

You can also hide buttons to many different functionalities into these expansions.

您還可以將具有許多不同功能的按鈕隱藏到這些擴展中。

懸停動作 (Hover actions)

Common actions, such as delete or edit, should be made easily accessible. One way is to present them while the user is hovering over a row. This will reduce visual noise quite a bit, but newer users might have trouble finding them at first.

常用操作(例如刪除或編輯)應易于訪問。 一種方法是在用戶將鼠標懸停在一行上時顯示它們。 這將大大減少視覺噪音，但是新用戶可能一開始會遇到麻煩。

大量動作 (Bulk actions)

These common actions should also be made possible to do on multiple rows at once. Often this implementation is the only one required as you can do single line actions this way too.

這些通用操作也應該可以一次在多行上執行。 通常，此實現是唯一需要的一種，因為您也可以通過這種方式執行單行操作。

單元格編輯 (Cell editing)

Cell editing is a complex topic of its own. There are numerous ways to tackle the problem and different use-cases might benefit from different options.

單元格編輯本身就是一個復雜的主題。 解決問題的方法有很多，不同的用例可能會從不同的選擇中受益。

Here are some ways to add cell editing to your table:

以下是向表中添加單元格編輯的一些方法：

Having an input field in every cell

每個單元格中都有一個輸入字段

Good for complex tables, that requires a huge amount of flexibility and freedom to edit.

適用于復雜的表格，需要大量的靈活性和編輯自由。

On the other hand, this will make it easier for your customers to make mistakes. It also causes issues with UX as users may not know whether the inserted data got saved or not.

另一方面，這將使您的客戶更容易犯錯誤。 由于用戶可能不知道是否保存了插入的數據，這也會導致UX問題。

Edit button by editable cells

按可編輯單元格的“編輯”按鈕

In this solution, users have to make more clicks, but it’s easier to implement and general confusion is much lower — most people are already familiar with related iconography.

在此解決方案中，用戶必須增加點擊次數，但實現起來更容易，而且總的混亂程度也要低得多-大多數人已經熟悉相關的圖標。

If overused, it can add a lot of clutter. There is already very little space and heaps of data. To counter that you could use hover effects, but then you can’t distinguish editable cells by a glance.

如果使用過度，可能會增加很多混亂。 空間和數據堆已經很少了。 為了解決這個問題，您可以使用懸停效果，但是一眼便無法區分可編輯的單元格。

Edit button by rows

按行編輯按鈕

This way you can open up a modal (or something even fancier) for each row and fill in the data in an editable cell on that row. To reduce visual noise you can hide the buttons behind hover effects.

這樣，您可以為每行打開一個模態(甚至更高級)，并在該行的可編輯單元格中填寫數據。 為了減少視覺噪音，您可以將按鈕隱藏在懸停效果后面。

I certainly didn’t cover everything there is, but I hope the most important thing came through — Keep in mind what the end-user is used to, what they want to do with your table and how these tasks would be easiest to complete. To make your tables shine they must be as concise as possible rocking only features that are needed. Last, but not least I want to thank Uku Pattak, Mirko K?nd, Lydia Petrova and eAgronom team for their advice!

我當然沒有介紹所有內容，但是我希望最重要的事情發生了-記住最終用戶習慣了什么，他們想對您的表做什么以及如何最輕松地完成這些任務。 為了使您的桌子發光，它們必須盡可能簡潔，僅使所需的功能搖擺不定。 最后，但同樣重要的是 ，我要感謝Uku Pattak ， MirkoK?nd ， Lydia Petrova和eAgronom團隊的建議！