List Table
A list table arranges a list in a tabular fashion.
Figure 1: Example of a list table
Required Properties
- For the header, use wording that best describes the objects in the table. Do not use the words "table" or "list" because the user can already see the layout.
- Left-align the columns containing text and ID numbers. Right-align columns containing numerical values, such as quantities, measures and currencies.
- Use the number of rows per page consistently (for example, 10 rows per page), leaving the rows empty if there is no data, so that the footer always appears at the bottom.
- Paging: Current page / Total pages.
Optional
- Icons can be added on the table header.
- Column header labels can be links, used to sort items. If used, provide an sort icon indicating which column is sorted. An up arrow indicates that the first item is displayed at the top, and a down arrow indicates that the last item is displayed first.
- Displaying multiple rows per record in a table is allowed, though not recommended.
- Providing edit fields in tables is allowed, though not recommended, because of performance and computation resources issues.
- Searches and filters
- The number of items can be displayed on the footer, but the method must be consistent throughout the application.
Figure 2: A footer with search results
Dimensions
- Width: 100% of container (standard = 240 pix)
- Must include 11 pix space for scroll bar
- Table row height: 20 pix
- Footer height: 15 pix
- Space between header icons: 1 pix
- Space between paging icons: 4 pix
Colors and Fonts
- Header and footer background: Dark blue-gray #CBD5E1
- Header font: Bold black #000000
- Column header bachground: Medium blue-gray #DCE3EC
- Column header font: bold black #000000 left-align, except for numbers
- Cell background: White #FFFFFF
- Cell Border: Gray #DCE3EC
- Cell font: Regular black #000000
- Alternating row background (in multirow tables): Light blue-gray #E9EEF4
Semantic background colors can be used to emphasize some rows (for example, subtotals and totals) or grouping within table entries. Limit the number of colors used to a minimum and, to accommodate colorblind users, make sure that they are not the only means of conveying information.
- Group level 1: Blue #90AEEE
- Group level 2: Blue #AEC4F2
- Group level 3: Blue #CCDAF6
- Total: Yellow #FFF605
- Subtotal: Yellow #FFFB8C
- Positive: Green #AACDA1
- Negative: Red #F66767
