Tables enable users to see data under clear categories or groups to understand quantities and relationships between them. They can help compare quantities or understand how same types of quantities vary for different groups. Data tables vary in size based on content and can accommodate various type of data.
Anatomy of a Table
There can be a number of columns and rows in a table. While there need not be a limit on the number of rows, the maximum number of columns possible to be accommodated in a desktop would depend on the content and the corresponding width. There should be at least 2 columns to be considered as a data table. If more columns, other than what can be comfortably accommodated within the grid are required in a table, a horizonal scroll can be used.
Table Headers and Title Columns
Often times a table has the first column indicating the titles of each row that define a group for which the values vary in each column. Each column having a title too defining a type of information. These need to stand out to signify the exact nature of the tabulated information.
On any device, if a header text spills into 3 lines, it can either show ellipsis as the last 3 characters possible to fit comfortably or rephrase the content to be shorter.
Rows & Columns
Each Row is separated by a 1px divider in the color #CCCCCC. The colomns are separated by a 1px divider in color #FFFFFF. However it has padding at both ends of the text boxes. The columns do not have any background color or outline. They are simply defined by means of regular spacing and alignment.
All content and text boxes must be placed between the dividers in each row, keeping equal padding above n below. The row heights correspond to the font used. As specified in the typography section, the font size for body copy should be used in tables as well, however for mobile devices or content which may stack, a smaller text height prescribed in the scale with its appropriate line height for that device shall be used. (16px & 14px for the Mercer brand.)
For 16px Text Height
In most tables header text as 16px and Content text as 16px or 14px shall be used. In places where a larger table header may be required, i.e. 18px can be paired with 16px content.
Size
All Tables need not occupy the entire width of the layout. Tables can be left aligned if they are shorter in width.
The column widths are dependent on the content. While the alignments have been given below, the sizes for dates and fixed width numerals will be shorter other table items.
Content
Alignment
Left aligned:All textual content in any column or row must be left aligned. Fixed length values including dates and quantities that have a fixed number of digits or letters must be left aligned.
Right Aligned:Numerical values like sums of money and fixed decimals limits (upto 2 decimals) must be Right aligned so they're easy to read as monetary value following the unit system. This is specially helpful if the values are going to be added up
Centre aligned:All icons and badges if any, must be centre aligned, the padding for these columns will always remain the same and thus the column width will not change. All single value content whether its textual or numerical must be centre aligned, for example, names of countries or cities, Yes/ No, single numericals indicating quantities that are not to go beyond 4 digits, year, month names, etc.
Styles
There are several styles of tables that can be used. These are dependent on the complexity of the data and sometimes the quantity or nature of the information. While the spacing guidelines remain the same across styles, there are a few customizations required to distinguish between the types of tables.
1. Two-Column Tables
A standard table would have dividers to separate rows, however a simpler form of a table may also be used to reflect information. Such tables do not have a header, but a column against which values are shown against their titles.
Visual Example
Table/ Section Title
Please review the information below - if any of this information is incorrect, please contact us and we will update it for you
| Plan Name | Mercer SmartSuper Plan |
| Member Number | Member Number |
| Member Number | Name of Member |
| Date if Birth | 10/01/1988 |
| Payroll Number Superannuation Salary | $0.00 |
| Date Joined | 05/11/2021 |
| Eligible Service Date | 05/11/2021 |
| Reporting Centre | Retail Members |
The first column has the labels or the titles/ names of the information given in the corresponding column in the same row.
Code Usage
| Plan Name | Mercer SmartSuper Plan |
| Member Number | Member Number |
| Member Number | Name of Member |
| Date if Birth | 10/01/1988 |
| Payroll Number Superannuation Salary | $0.00 |
| Date Joined | 05/11/2021 |
| Eligible Service Date | 05/11/2021 |
| Reporting Centre | Retail Members |
2. Standard Table 1
This is a basic table type with content in each row and having only the header as the
Visual Example
Table title (if any)
| Header A | Header B | Header C |
|---|---|---|
| Cell A1 | Cell B1 | Cell C1 |
| Cell A2 | Cell B2 | Cell C2 |
| Cell A3 | Cell B3 | Cell C3 |
Code Usage
| Header A | Header B | Header C |
|---|---|---|
| Cell A1 | Cell B1 | Cell C1 |
| Cell A2 | Cell B2 | Cell C2 |
| Cell A3 | Cell B3 | Cell C3 |
3. Standard Table 2
In order to build consistency the tables have been defined to follow and alternate shading of rows as a style. This enables the users to distinguish data rows easily.
Visual Example
Table title (if any)
| Header A | Header B | Header C |
|---|---|---|
| Cell A1 | Cell B1 | Cell C1 |
| Cell A2 | Cell B2 | Cell C2 |
| Cell A3 | Cell B3 | Cell C3 |
| Cell A2 | Cell B2 | Cell C2 |
Code Usage
| Header A | Header B | Header C |
|---|---|---|
| Cell A1 | Cell B1 | Cell C1 |
| Cell A2 | Cell B2 | Cell C2 |
| Cell A3 | Cell B3 | Cell C3 |
| Cell A2 | Cell B2 | Cell C2 |
4. Tables with Tooltips
Tables with links are not very different from 'Standard Table 2'
Visual Example
Table title (if any)
| Investment Option | Entry Price | Entry Price |
|---|---|---|
| Mercer SmartPath - Born 1959 - 1963 | 1.8007 | 1.9230 |
| Mercer Diversified Shares | 1.8007 | 1.9230 |
| Mercer High Growth | 1.8007 | 1.9230 |
| Mercer Select Growth | 1.8007 | 1.9230 |
Code Usage
| Investment Option | Entry Price | Entry Price |
|---|---|---|
| Mercer SmartPath - Born 1959 - 1963 | 1.8007 | 1.9230 |
| Mercer Diversified Shares | 1.8007 | 1.9230 |
| Mercer High Growth | 1.8007 | 1.9230 |
| Mercer Select Growth | 1.8007 | 1.9230 |
Responsive Behavior For Complex Tables
When an elaborate table needs to be visualized in the mobile devices, they need to be optimized for comfortable viewing and fitting of content.
The table above is modified as shown below for smaller breakpoint sizes.
Visual Example
Allocation
| Investment Option | Old Allocation %($) | New Allocation %($) |
|---|---|---|
| Mercer High Growth ℹ | 38% $32,135.00 |
38% $32,135.00 |
| Mercer Sustainable Plus Conservative ℹ | 38% $32,135.00 |
38% $32,135.00 |
| Mercer Passive International Shares ℹ | 38% $32,135.00 |
38% $32,135.00 |
| Total | 100% $84,567.00 |
In responsive behavior the column headers, after the main column, become rows under a header which is actually the first row entry. In the example shown above, the new and old allocations are two such groups, which were originally columns in medium & large breakpoints.
For tables that do not have a first column as a main column, the tables can try to accommodate all content within the available width across the screen and beyond that can become a horizontal scroll.
The minimum width of a column should be 20px and 16px for medium to large and smaller breakpoints respectively.
Code Usage
| Investment Option | Old Allocation %($) | New Allocation %($) |
|---|---|---|
| Mercer High Growth ℹ | 38% $32,135.00 |
38% $32,135.00 |
| Mercer Sustainable Plus Conservative ℹ | 38% $32,135.00 |
38% $32,135.00 |
| Mercer Passive International Shares ℹ | 38% $32,135.00 |
38% $32,135.00 |
| Total | 100% $84,567.00 |
Complex Tables
5. Table with Accordians
For tables where first columns and headers define information types, with more tan 2- 3 columns, accordians can also be used. A visual example can be seen below:
The table above is modified as shown below for smaller breakpoint sizes.
Visual Example
Change Existing Balance Investment Allocation
| Investment Option | Current Allocation (Estimate) |
|---|---|
|
|
38% $32,135.00 |
| Performance |
New Allocation
%
$16,915.00 |
|
|
37% $31,290.00 |
| Performance |
New Allocation
%
$16,915.00 |
|
|
25% $21,142.00 |
| Performance |
New Allocation
%
$16,915.00 |
| Total | 100% $84,567.00 |
Code Usage
| Investment Option | Current Allocation (Estimate) |
|---|---|
|
|
38% $32,135.00 |
| Performance |
New Allocation
%
$16,915.00 |
|
|
37% $31,290.00 |
| Performance |
New Allocation
%
$16,915.00 |
|
|
25% $21,142.00 |
| Performance |
New Allocation
%
$16,915.00 |
| Total | 100% $84,567.00 |
6. Table with Editable Fields
Tables can have editable field sometimes. These are for the user to be able to adjust values while they have a convenient view of the other values that may affect it.
Visual Example
Code Usage
7. Table with Editable Fields & Tooltips
This is a combination of several types and does not have horizontal dividers like the two-column table above. While in mobile view it would be fairly similar to the view above without dividers, the desktop view would use the spacing guidelines shown below:
Visual Example
Your Investment Strategy
| Investment Option | Pension Investment | $ |
|---|---|---|
| Mercer SmartPath |
%
|
|
| Mercer diversified shares |
%
|
$38,055.00 |
| Mercer Conservative Growth |
%
|
$38,055.00 |
| Mercer Cash |
%
|
|
| Total Pension Investment |
%
|
$358,191.86 |
Code Usage
| Investment Option | Pension Investment | $ |
|---|---|---|
| Mercer SmartPath |
%
|
|
| Mercer diversified shares |
%
|
$38,055.00 |
| Mercer Conservative Growth |
%
|
$38,055.00 |
| Mercer Cash |
%
|
|
| Total Pension Investment |
%
|
$358,191.86 |
Other components in Tables & Their Spacing
While padding and margins are given above for each type of table, incase other elements need to be a part of the table, the following padding may be followed:
Visual Example
With Icons
| Header A | Header B | Header C |
|---|---|---|
| Cell A1 |
Cell B1 | Cell C1 |
Cell A2 |
Cell B2 | Cell C2 |
Cell A3 |
Cell B3 | Cell C3 |
| Cell A2 |
Cell B2 | Cell C2 |
Code Usage
| Header A | Header B | Header C |
|---|---|---|
| Cell A1 |
Cell B1 | Cell C1 |
Cell A2 |
Cell B2 | Cell C2 |
Cell A3 |
Cell B3 | Cell C3 |
| Cell A2 |
Cell B2 | Cell C2 |
With Check Boxes
Visual Example
| Header A | Header B | Header C |
|---|---|---|
|
|
Cell B1 | Cell C1 |
|
|
Cell B2 | Cell C2 |
|
|
Cell B3 | Cell C3 |
|
|
Cell B2 | Cell C2 |
Code Usage
| Header A | Header B | Header C |
|---|---|---|
|
|
Cell B1 | Cell C1 |
|
|
Cell B2 | Cell C2 |
|
|
Cell B3 | Cell C3 |
|
|
Cell B2 | Cell C2 |
With Radio Buttons
Visual Example
| Header A | Header B | Header C |
|---|---|---|
|
|
Cell B1 | Cell C1 |
|
|
Cell B2 | Cell C2 |
|
|
Cell B3 | Cell C3 |
|
|
Cell B2 | Cell C2 |
Code Usage
| Header A | Header B | Header C |
|---|---|---|
|
|
Cell B1 | Cell C1 |
|
|
Cell B2 | Cell C2 |
|
|
Cell B3 | Cell C3 |
|
|
Cell B2 | Cell C2 |