Tables
A table displays data sets in a single row, making it efficient to look up values.
Types
Guidelines
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
Specifications
Developers and designers can use table specifications to help them create products that are pixel-perfect.
Accessibility
- Use <th> and <td>.
- Sort and filter using a hover or highlight state.
Do
- 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.
Don't
- 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.