Last updated: September 11, 2015 at 16:07 pm

Visual styling for data & information tables, and guidelines for when best to use them.

Visual example of the element:

What problem does this element or pattern solve?
Certain information, such as financial data and feature comparisons, is best presented in a table or grid format. However, these can be extremely problematic if you have a responsive website, as data formatting can be muddled when reduced from desktop to mobile phone screen widths. Use this section to clearly define your tables, when they should be used, and how to adjust their display on smaller devices.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:

Detailed specifications

Specifications To Consider

• Row and column background colors. Does your table have a consistent background color, or do rows or columns alternate between two shades?

• Row and column divider styling. This includes line colors and widths.

• How will wide-format tables behave when presented on responsive layouts?

• Spacing (padding) within individual cells.

• Any special typography rules. This is particularly related to alignment within the cells (left, centered, justified).

• Special formatting for numbers. Should numbers always align right even when the remaining cells align left? How many decimal places should be shown?

• Visual styling for table headings for both rows and columns.

• Rules associated with the use of tables. What type of content should be shown in table format?

Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository

Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
matrices, data, charts, data schedules, data graphs, comparisons, lists, tabulation
Related elements within this Style Framework:




Owners and governance
UX or design 0wner
John Designowner
Business or marketing owner
Mary Businessowner
Development owner
Mike Devowner

Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)

Comments & Questions

Leave a Reply