A table displays data sets in a single row, making it efficient to look up values.



See the Pen Tables - Desktop by USANA UX (@usana_ux) on CodePen.


See the Pen Tables - Scrollable by USANA UX (@usana_ux) on CodePen.


Tables are recommended to organize information logically, group similar data together, and simplify complex content.

  • Always ask "Do I need a table?"
  • Left align alphabetic columns
  • Right align numeric columns
  • Align headers with related content
  • Format content as sentence case
  • Avoid Zebra striping or extra styling
  • Avoid sans-serif type and capitalizing text
  • Add more rows than columns for easier readability


Developers and designers can use table specifications to help them create products that are pixel-perfect.


  • Use <th> and <td>.
  • Sort and filter using a hover or highlight state.
  • Use when exact values are useful to know.
  • Use when data is equally important.
  • Show information and data for comparison.
  • Display structured content, where each entry has the same attributes.
  • Use to create a page layout or structure.
  • Use to list continuous, vertical indexes of text or images.
  • Display contained content and actions on a specific topic.
  • For hierarchical structures.