Data Table #2

0001-01-01

The standard CSS framework comes with a small collection of built-in table designs that are easy for the site developer to update. This is one of the layouts.

Data Table #2 is the layout that is applied by default in the CMS visual editor when a table is added to a page of content.

This table provides alternate visual themes:

Important Note

The example tables on this page are used for testing layout and table functionality.

These tables  do not indicate accessibility best practises, although the standard CMS stylesheets include WCAG 2.1 AA level accessible colours by default. Creating accessible tables requires a focus on the structure of content within a table which the CMS will help you to achieve, but is not within the scope of examples on this page.

Table of Contents

Data Table #2 - Responsive - Headers Top in Header Section + Left in Body Section

This is a paragraph of text placed before the table to show how tables interact with content around them. Vivamus est velit, sollicitudin at magna eu, dapibus tempus eros. Cras mattis, purus sed elementum iaculis, risus erat feugiat metus, dignissim mattis justo diam at libero. 

Figure 1: This is a simple table, and this caption describes it. A real caption would have a better description, for accessibility. This table is responsive with data headers on the left and the header row has incorrectly been placed within tbody.
Transfer Stations Mon Tue Wed Thu Fri Sat Sun
Seymour 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm 10am - 4pm 10am - 4pm
Wallan 10am - 4pm 10am - 4pm Closed 10am - 4pm 10am - 4pm 10am - 4pm 10am - 4pm
Broadford Closed Closed 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm
Pyalong 9am - 1pm Closed Closed Closed Closed Closed 12pm - 4pm

Data Table #2 - Responsive - Headers Top + Left - Hide Vertical Borders - Highlighted Rows & Cells

This table is responsive with data headers on the left and proper usage of thead and tbody sections, and vertical borders are hidden. Highlighted rows and cells are included.

Transfer Stations Mon Tue Wed Thu Fri Sat Sun
Seymour 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm 10am - 4pm 10am - 4pm
Wallan 10am - 4pm Highlight #4 Closed 10am - 4pm 10am - 4pm 10am - 4pm Highlighted Cell #1:
10am - 4pm
Broadford Closed Closed 12pm - 4pm Closed Highlight #2 12pm - 4pm 12pm - 4pm
Highlighted Row #1 Closed Closed 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm
Highlighted Row #2 Closed Closed 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm
Highlighted Row #3 Closed Closed 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm
Highlighted Row #4 Closed Closed 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm
Pyalong 9am - 1pm Closed Highlighted Cell #3 Closed Closed Closed 12pm - 4pm

Data Table #2 - Responsive, Alternating Rows & Columns

Data Table #2 - Responsive, Alternating Rows

Transfer Stations Mon Tue Wed Thu Fri Sat Sun
Seymour 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm 10am - 4pm 10am - 4pm
Wallan 10am - 4pm 10am - 4pm Closed 10am - 4pm 10am - 4pm 10am - 4pm 10am - 4pm
Broadford Closed Closed 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm
Pyalong 9am - 1pm Closed Closed Closed Closed Closed 12pm - 4pm

Data Table #2 - Responsive, Alternating Rows (Shift)

Transfer Stations Mon Tue Wed Thu Fri Sat Sun
Seymour 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm 10am - 4pm 10am - 4pm
Wallan 10am - 4pm 10am - 4pm Closed 10am - 4pm 10am - 4pm 10am - 4pm 10am - 4pm
Broadford Closed Closed 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm
Pyalong 9am - 1pm Closed Closed Closed Closed Closed 12pm - 4pm

Data Table #2 - Responsive, Alternating Columns

Transfer Stations Mon Tue Wed Thu Fri Sat Sun
Seymour 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm 10am - 4pm 10am - 4pm
Wallan 10am - 4pm 10am - 4pm Closed 10am - 4pm 10am - 4pm 10am - 4pm 10am - 4pm
Broadford Closed Closed 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm
Pyalong 9am - 1pm Closed Closed Closed Closed Closed 12pm - 4pm

Data Table #2 - Responsive, Alternating Columns (Shift) & Alternating Rows

Transfer Stations Mon Tue Wed Thu Fri Sat Sun
Seymour 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm 10am - 4pm 10am - 4pm
Wallan 10am - 4pm 10am - 4pm Closed 10am - 4pm 10am - 4pm 10am - 4pm 10am - 4pm
Broadford Closed Closed 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm
Pyalong 9am - 1pm Closed Closed Closed Closed Closed 12pm - 4pm
Closed Place Closed Closed Closed Closed Closed Closed Closed

Data Table #2 - Responsive - Headers Top Only - Sub Headers in the Table Head and Body

This table is responsive without data headers on the left and proper usage of thead and tbody sections:

Transfer Station Mon Tue Wed Thu Fri Sat Sun
Sub Header Row First One Tuesday Wednesday the First Thurs Friday on My Mind Satdee Sundee
Seymour 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm 10am - 4pm 10am - 4pm
Wallan 10am - 4pm 10am - 4pm Closed 10am - 4pm 10am - 4pm 10am - 4pm 10am - 4pm
Sub Header Row Next Mon Tue Next Next Wed Thu Next Next Fri Sat Next Next Sun
Broadford Closed Closed 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm
Pyalong 9am - 1pm Closed Closed Closed Closed Closed 12pm - 4pm

Data Table #2 - Responsive - Headers Top Only - Header Experiment

This table is responsive without data headers on the left and proper usage of thead and tbody sections. A sub header is included in the table body. The table head includes a second header row, which is not marked up as a sub header.

Transfer Station Mon Tue Wed Thu Fri Sat Sun
Second Head Row Table Head Section More Content Ended Here
Sub Header Row In Table Body Tuesday Wednesday the First Thurs Friday on My Mind Satdee Sundee
Seymour 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm 10am - 4pm 10am - 4pm
Wallan 10am - 4pm 10am - 4pm Closed 10am - 4pm 10am - 4pm 10am - 4pm 10am - 4pm
Sub Header Row Next Mon Tue Next Next Wed Thu Next Next Fri Sat Next Next Sun
Broadford Closed Closed 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm
Pyalong 9am - 1pm Closed Closed Closed Closed Closed 12pm - 4pm

Data Table #2 - Responsive - Headers Top in Body + Test Content

This table is responsive without data headers on the left and the header row has incorrectly been placed within tbody:

This is a Heading 3 Inside a Table Caption

Text goes inside the caption, it can have regular HTML inside it including headings.
Transfer Station Mon - This Header is Quite Long

Tue
This has
line breaks

And a paragraph

Wed

hi

 Thu Fri Sat Sun
Seymour 12pm - 4pm Closed for the long holiday, and this data cell has quite a lot of text in it - more than the size of the header cell so we can see what happens. Closed 12pm - 4pm 12pm - 4pm 10am - 4pm 10am - 4pm
Wallan 10am - 4pm 10am - 4pm Closed 10am - 4pm 10am - 4pm 10am - 4pm 10am - 4pm
Broadford Closed Closed 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm
Pyalong 9am - 1pm Closed Closed Closed Closed Closed 12pm - 4pm

Data Table #2 - Not Responsive

This table is not responsive but includes proper use of thead and tbody sections:

Transfer Stations Mon Tue Wed Thu Fri Sat Sun
Seymour 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm 10am - 4pm 10am - 4pm
Wallan 10am - 4pm 10am - 4pm Closed 10am - 4pm 10am - 4pm 10am - 4pm 10am - 4pm
Broadford Closed Closed 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm
Pyalong 9am - 1pm Closed Closed Closed Closed Closed 12pm - 4pm

Data Table #2 - Kitchen Sink

This table is responsive with data headers on the top (in the thead section) and left, proper usage of thead and tbody sections, multiple kinds of highlighted cells and rows, alternate row styles and a hover effect:

Transfer Stations Mon Tue Wed Thu Fri Sat Sun
Seymour 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm 10am - 4pm 10am - 4pm
Wallan 10am - 4pm Highlight #4 Closed 10am - 4pm 10am - 4pm 10am - 4pm Highlighted Cell #1:
10am - 4pm
Broadford Closed Closed 12pm - 4pm Closed Highlight #2 12pm - 4pm 12pm - 4pm
Pyalong 9am - 1pm Closed Highlighted Cell #3 Closed Closed Closed 12pm - 4pm
Highlighted Row #1 Closed Closed 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm
Highlighted Row #2 Closed Closed 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm
Highlighted Row #3 Closed Closed 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm
Highlighted Row #4 Closed Closed 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm
Alternate Row #1 Closed Closed 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm
Alternate Row #2 Closed Closed 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm
Alternate Row #3 Closed Closed 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm
Alternate Row #4 Closed Closed 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm
Inactive Row Closed Closed 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm
Alternate Cells Alternate #1 Alternate #2 Alternate #3 Alternate #4 Inactive cell 12pm - 4pm 12pm - 4pm
Highlighted Text Row #1 Closed Closed 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm
Highlighted Text Row #2 Closed Closed 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm
Highlighted Text Row #3 Closed Closed 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm
Highlighted Text Row #4 Closed Closed 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm
Highlighted Text Cells Highlight #1 Highlight #2 Highlighted #3 Highlight #4 Closed Closed 12pm - 4pm

Data Table #2 in a Dark Block - Responsive - Headers Top + Left

This table is responsive with data headers on the left and proper usage of thead and tbody sections:

Transfer Stations Mon Tue Wed Thu Fri Sat Sun
Seymour 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm 10am - 4pm 10am - 4pm
Wallan 10am - 4pm 10am - 4pm Closed 10am - 4pm 10am - 4pm 10am - 4pm Highlighted cell:
10am - 4pm
Broadford Closed Closed 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm
Highlighted Row Closed Closed 12pm - 4pm Closed Closed 12pm - 4pm 12pm - 4pm
Pyalong 9am - 1pm Closed Closed Closed Closed Closed 12pm - 4pm