Pattern name
Summary
1. Tables with text (missing some detail here, yes?????)
2. Tables with numbers (ditto)
3. Keep actions (and important data such as totals) visible on long scrolling pages, placing it right or top as needed. (ditto)
4. Page-level actions with in-page tabs (ditto)
Example Code
Example (in use, with an interaction, in context)
Related patterns
Problem (business, user, technical)
Solution
Rationale (other things we tried and why we chose to use this solution)
Accessibility
Tables
- Summary
- Tables with text should include headers and be displayed in Source Sans at a minimum 13 pt font. Text should be aligned left.
- Tables with numbers Keep actions visible on long scrolling pages, placing it right or top as needed. numbers should be displayed in Source Code Pro at a minimum 13 pt font. Numbers should be aligned right.
- Headers and instruction text should appear above the tables. Column headers should allow users to sort their view of the table by clicking the header. . For filtering, place a drop-down menu above the affected table(s). If the drop-down filter affects a single table, the select widget should appear above the table and below the table header and instruction copy. If the drop-down selector affects multiple tables, it should appear above all the affected tables and their headers and instruction copy.
- Example Code
- Example (in use, with an interaction, in context)
- Related patterns
- Tabs
- Drop-downs
- Problem (business, user, technical)
- Tabular data is common in the BI applications at MIT. The tables need to be as user friendly as possible while conveying all relevant data.
- Solution
- Tables are the best display solution for rows and columns of text and numbers.
- Rationale (other things we tried and why we chose to use this solution)
- Accessibility