Table Style

When deciding how to style and format your table, prioritize readability and remove any visual clutter that may distract the eye.

1. Choose The Best Row Style

Row style helps users scan, read, and parse through data. Choose the best style for the type and amount of data in your table.

Grid: Including both horizontal and vertical lines provides the most separation between data points, but the excess visual noise can be distracting. This spreadsheet-style is recommended for dense, data heavy tables.

Grid example (table from UI Prep)

Horizontal Lines: Only showing horizontal lines reduces the visual noise of a full grid. This style includes plenty of white space while still helping the user keep their place while reading. This style is the most common and recommended for all data set sizes.

Horizontal line example (table from UI Prep)

Zebra Stripes: Alternating different color backgrounds for each row is another good way to help users keep their place while reading. This style is recommended for larger data sets where the alternating pattern will be clear and not cause confusion that a particular row is highlighted.

Zebra stripe example (table from UI Prep)

Free Form: Removing all dividers creates a minimalist look by reducing visual noise as much as possible. This style is recommended for small data sets where the users wont need help keeping their place while reading.

Free form example (table from UI Prep)

2. Use Clear Contrast

Establish hierarchy by adding contrast to your table. This can be done with different text styles and backgrounds.

Header Contrast: Differentiate header text from column text by changing the weight and color. Applying a different color background to the header can provide additional contrast if desired.

Top: header text contrast, Bottom: header background contrast (table from UI Prep)

Column data: Column data can also use different weights and colors to emphasize certain data like the row identifier (first column) or a primary data point in a single cell (ie. cell data: 1,234 34%).

Top: identifier contrast, Bottom: Data contrast (table from UI Prep)

3. Add Visual Cues

Use different colored backgrounds to add organizational context and meaning to your table. These visual cues help present the data in a way that is easier to scan and understand.

Row Background: Change the color of an entire row to highlight a difference in the domain of data (ie. switching between single values and sums or averages).

Row background example (table from UI Prep)

Cell Background: Change the color of a cell to highlight the status of a data point (ie. trending up, trending down).

Cell background example (table from UI Prep)

4. Align Columns Properly

By default, most column data is left aligned. This helps make the data easily scannable, readable and comparable. The one exception is numeric data related to size. These numbers should be right aligned to help users identify number size.

Rules to follow:

Align textual data to the left (ie. Name) Align numeric data not related to size (ie. date, zip code, phone number) Align numeric data related to size (ie. count, percent) Align headers according to their column data

Alignment example (table from UI Prep)

5. Use Tabular Numerals

Use a tabular (or monospaced) font when displaying numbers. This means, rather than having proportional spacing (ie. “W” is wider than “I”), each figure is the same width. This makes columns of numerical data easier to scan.

For your table, you can use an inherently monospaced font (ie. Courier, Courier New, Lucida Console, Monaco, ect.) or the monospaced numeric set sometimes included with proportional fonts.

Proportional vs tabular font example

5. Choose an Appropriate Line Height

Choose a line height most appropriate for the type and amount of data in your table. Regular and relaxed row heights offer more white space, and are more comfortable for reading large data sets. Using a condensed row height will allow the user to view more data at once without having to scroll, but will reduce the table’s readability and potentially cause parsing errors.

Row heights

Condensed: 40px

Regular: 48px

Relaxed: 56px

Line height examples (table from UI Prep)

6. Include Enough Padding

Maintain a minimum of 16px padding on both the right and left of each column. This means the space between each column should total at least 32px.

Padding example (table from UI Prep)

7. Use Subtext

Subtext can provide timely context and helpful details without taking up space or cluttering the table. It can also be used to combine columns.

For example, instead of having separate columns for user and email, the email can be added as subtext below the user’s name.