Also known as: List, Data List, List View, Data Grid, Spreadsheet, Table, Multi-Column List.

Why

• Provides structure to data.
• A well-designed table makes it easy to scan information and find items from a large set of data.
• People are familiar with data tables.
• Allows easy comparison between items.

How it works

All tables

• Tell what the table is about.
  • Give the table a descriptive title, and also a brief caption if needed. Show the title at the top of the table or in the table header, and the caption below the table.
• Reduce and compress data.
  • Show only the information that users really need to see, but provide a possibility to dig deeper into details. Use Inlays, Overlays, and tooltips for showing details on the same page with the table to maintain user’s flow.
  • If you have numeric data, keep the level of precision appropriate. The less decimals, the less time it takes to scan and understand the data.
  • Summarize data when possible.
• Use visual elements as little as possible.
  • Remove all interface elements that are not necessary. Less visual noise means less distraction and makes it easier to concentrate on the table data. Focus should be on the information itself, not the design of the table.
  • However, don’t remove visual elements that are useful. Keep the elements that support structure, organization, and readability of the table, but use the minimum amount of visual weight needed (use light colors, thin borders etc.).
• Highlight the most important data.
  • Use different styling for information that is always important (e.g. total column), and information that is important at the moment (exceptions in data items etc.).
  • Change color intensity and/or hue, use bigger font, bold text, thicker lines, different orientation, added marks etc. to make important information stand out from other data.
  • Keep in mind that if you emphasize too much information, nothing will stand out anymore.
• Allow customization.
  • Consider allowing the users to select what information to show in the table.
• Right-left alignment.
  • Right align numbers, to make it easier to compare and sum up the values.
  • Left align text.
  • Consider using center alignment for columns that contain status texts (e.g. planned, completed) to make them stand out.

Large tables

• Make table headers float.
  • If the table becomes large, make the table headers stay visible in the browser window as the user scrolls up and down a page to remind the user of what the columns in the table are. See example screen cast.
  • The more columns there are, the more valuable this feature is.
  • See JavaScript implementation on Google Code.
• Use Endless Scrolling or Page Pagination pattern when all the results doesn’t comfortably fit within one page.
• Allow sorting.
  • Let users to sort the table by clicking table headers.
  • Use a link color, underline, or sort icons to communicate that column headers are sortable.
  • Sort items in a logical order by default.
• Provide filtering options.
  • See Refining Search for details.

Table Actions

Actions in tables are a large topic and will be described later in another pattern.

History

Janne Lammi wrote this pattern. It is inspired by Theresa Neil’s blog post “12 Standard Screen Patterns” and many other articles and books on the topic. See ‘References’ for full list.

Pattern Gallery

Show Your Pattern Examples Here!

Add your examples to this pattern by adding them to flickr.com group UIPatternFactory.com and tagging with this tag:

More photos in Flickr group "UIPatternFactory.com" tagged with data-table