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 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