Refine By

Tables

  • Contents:
  • Tables are used to present data in a lattice of columns and rows.
  • They are useful for presenting textual data while grids are preferred for presenting images.

Guidelines

 

  • Keep it simple.
  • Clearly define the table header and table body.
  • Ensure rows are the same height and that columns are the same width.
  • Use tables for textual content only.
  • Use a grid to present a selection of images.
  • Place the comparison points in the header as users typically scan left to right, top to bottom.
  • Use zebra shading to help users scan data across rows and reduce tracking errors.
  • For responsive views, consider placing the key comparison point in a fixed left-hand column and allow the remaining cells to scroll underneath this column.
  • Allow the data table to extend beyond the view width, rather than resizing to make it all fit. Sizing will squish the table and make it hard to read the data. Using horizontal scrolling will allow the table to maintain its proper aspect ratio and allow the user to have a seamless comparison experience.

Style

 

Accessibility

 

A critical step toward creating an accessible data table is to designate row and/or column headers. In the markup, the <td> element is used for table data cells and the <th> element is used for table header cells.

Table headers should never be empty. This is particularly of concern for the top-left cell of some tables

As you use and customize this element, ensure it continues to follow the Accessibility 101 guidelines.

Related Elements

Related Components

Version History

Date/Time of ChangeWho Made the ChangeChange Details
May. 03 2017 9:27pm Initial content entry