Design

Research and rationale

Our table design is based on the original Digital Transformation Agency (DTA) table component. While this component worked well we found we needed to add more complex table designs such as tables within vertical scrolling and tables that could incorporate figures, captions and footers.

We drew inspirations for our updated table styles from the USA Design System and from the W3Cs comprehensive table guidelines.

Striping alternate rows

We inherited the functionality research by the DTA for striped tables. Striped tables work well for tables with large amounts of rows. The process of highlighting alternate rows helps increase readability and scanning speed. We implemented the same approach as the DTA which was to highlight the bottom row using the nth-last-child(odd) selector as this provides the table with visual completeness.

Accent colours

WC3 recommends styling header <th> cells so they are visually distinct from standard cells (World Wide Web Consortium, n.d.). To add more visual distinctiveness to our table component we have used the accent colour as the bottom border for the header cells. This makes the header stand out more on the page and allowed as to incorporate more brand colours into the overall design.

Contained tables

When investigating table patterns we noticed that tables often came in two formats a borderless and a contained style. The original DTA design was based on a borderless approach which can be useful when you want the information to feel more a part of the text it accompanies. However what we found was that when there were multiple tables on a page or when the table needed to appear as self contained piece of information a contained style was more appropriate.

Further to this when designing tables for complex reporting websites such as the CHO Report we found that contained tables can provide better structure and organization, especially for complex data. Borders clearly delineate each cell, making it easier to read and comprehend the information.