šŸ‘‹šŸ½ We wrote a book! Order Wireframing for Everyone today ā†’

Balsamiq

Toggle navigation

Table and Data Grid Guidelines

Tables are components used to house and display large amounts of data in a logical order.

Applies to:
Data Grid

Style

There are 5 ways you can style a table.

Ruled grid

A ruled grid draws vertical and horizontal lines between each cell. One of the benefits of this style is that itā€™s very clear which elements belong to which row and which cells belong to what header. However, one of the downsides is that it can look cluttered as all the lines may not be necessary.

Ruled rows

A table with ruled rows means that horizontal lines separate each row. This style is less cluttered than the ruled grid but still very easy to read. Because of this, itā€™s one of the more common grid styles, especially for large tables.

Zebra stripes

Zebra stripes, or alternating rows, are when the background color of every second row is a slightly different color. Like the ruled rows, it is straightforward to read and not cluttered. One of the downsides of using zebra stripes is that users with visual impairments may not be able to see the slight change in row color.

Zebra stripes can be used in conjunction with the other ruled styles of tables. For example, you can have a table with ruled rows and zebra stripes.

Ruled columns

A table with ruled columns means that there are vertical lines separating cells. This style isnā€™t as popular as the ruled rows type.

Free-form

A free-form table doesnā€™t have any rules or zebra stripes. While it may look clean and uncluttered, it may be difficult for users to read correctly.


Common cell types

There are many different cell types, but 3 of the most common are text, number, and checkbox cells.

Text cells

Text cells are table cells with regular text. This could include names, job titles, eating preferences, etc. If users were to click sort, they would see the tableā€™s rows reorder in alphabetical or reverse-alphabetical order..

Number cells

Number cells are table cells with numbers. These numbers can include ages, amounts, money, and more. Sorting number cells reorders them in numerical order from highest to lowest or vice versa.

Checkbox

A checkbox cell is a table cell with a checkbox. A checkbox is a boolean variable that can only be "checked" or "unchecked" and less often "indeterminate." Checkboxes in the context of a table are often used to indicate yes/no variables such as whether a project is done, whether an invoice has been sent, or whether a team member is a remote worker. Sorting checkbox cells will group all the checked checkboxes at the top and the unchecked checkboxes at the bottom or vice versa.


Tables on mobile

Tables are, generally speaking, big, bulky components that do not display well on mobile phones. There are 2 ways to approach tables on mobile.

Default

Without changing anything, a table on mobile will have a long horizontal scroll (and potentially a long vertical scroll). While this is easy to do, some users may get confused when scrolling back and forth and associate the wrong values with one another.

Vertical list

By taking the values out of a table and putting them into a list, the user can easily see all the associated data. However, one of the downsides of this pattern is that itā€™s difficult to see the values in the context of one another.


Best practices

When creating tables, you want the data to be as easy to navigate and interpret as possible.

Allow users to sort rows

Allow users to sort the rows using the arrows (i.e., the little triangles) in the title bar.

Active - Ascending: When a column is set to active ascending, it means that the values are in alphabetical or ascending order (e.g., A - Z, or 0 - 10, or checked - unchecked). This is useful for ordering prices from lowest to highest or organizing names alphabetically.

Active - Descending: When a column is set to active ā€“ descending, it means that the values are in reverse-alphabetical or descending order (e.g. Zā€“A, 10ā€“0, or uncheckedā€“checked). This is useful for organizing prices from highest to lowest or names in reverse-alphabetical order.

Sortable: If there are two arrows, one pointing up and the other down, it means that the table isnā€™t currently sorted by that column, but it can be if you click on it.

Non-sortable: If there arenā€™t arrows by the title, it means that the user canā€™t sort the table by that column.

Fix the header on scroll

When you have a table that has a scroll, itā€™s recommended to always make the header fixed (or frozen). This means that as the user scrolls down, the header stays in the same place, making it easier for the user to navigate.

Consider fixing the left column

When dealing with tables that have long rows, consider fixing or freezing the left-most column. This will help users when navigating through large amounts of data.

Space columns based on their content

Tables should always be spaced according to the content within each column. For example, checkboxes and small numbers wonā€™t need as much column space as a name or an occupation.


By Tess Gadd
Got questions or feedback? Email learn@balsamiq.com.