Data Table #4

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.

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 #4 - Responsive + Caption

This is a Heading 3 Inside a Table Caption

Text goes inside the caption, it can have regular HTML inside it including headings.
Column 1 Header Column 2 Header Column 3 Header Fourth Column Five
Sub Header Row Header Another Header Sub Header Sub Five
Item 1 information information Content in this cell is a bit longer than the others Short
Item 2 information information Short cell Info
Sub Header Row Header Another Header Next Sub Header Sub Sub
Another Item information information Whee Single
More Items information information No info here Words
Even More Items Highlighted cell - information information We'd like to put lots of info here Here
Last Row information information This is the second last cell Last cell

Data Table #4 - Not Responsive, Headers in Body

Column 1 Header Column 2 Header Column 3 Header
Item 1 information information
Item 2 information information
Another Item information information
More Items information information

Data Table #4 - Responsive, Left Headers + Caption

Text goes inside the caption, it can have regular HTML inside it including headings.

Column 1 Header Column 2 Header Column 3 Header
Item 1 information information
Item 2 information information
Another Item information information
More Items information information

Data Table #4 - Responsive + Caption - Alternating Rows

This is a Heading 3 Inside a Table Caption

Text goes inside the caption, it can have regular HTML inside it including headings.
Column 1 Header Column 2 Header Column 3 Header
Item 1 information information
Item 2 information information
Sub Header Row Header Another Header
Another Item information information
More Items information information
Even More Items Highlighted cell - information information
More Items information information
Still Items information information
Highlighted Row #1 information information
Highlighted Row #2 information information
Highlighted Row #3 information information
Highlighted Row #4 information information
Last Row information information

Data Table #4 - Responsive + Caption - Alternating Columns

This is a Heading 3 Inside a Table Caption

Text goes inside the caption, it can have regular HTML inside it including headings.
Column 1 Header Column 2 Header Column 3 Header Fourth Column Five
Sub Header Row Underneath the Header Upward And Ever Onward
Item 1 information information Extra information Short
Item 2 information information Additional information Words
Sub Header Row Header Another Header Sub in Four Sub Five
Another Item information information Whee  
More Items information information No info here  
Even More Items Highlighted cell - information information We'd like to put lots of info here  
More Items information information This cell is somewhere in the middle  
Still Items information information    
Last Row information information    

Data Table #4 - Not Responsive - Hide Vertical Borders

This is a Heading 3 Inside a Table Caption

Text goes inside the caption, it can have regular HTML inside it including headings.
Column 1 Header Column 2 Header Column 3 Header Fourth Column Five
Sub Header Row Underneath the Header Upward And Ever Onward
Item 1 information information Extra information Short
Item 2 information information Additional information Words
Sub Header Row Header Another Header Sub in Four Sub Five
Another Item information information Whee  
More Items information information No info here  
Even More Items Highlighted cell - information information We'd like to put lots of info here  
More Items information information This cell is somewhere in the middle  
Still Items information information    
Last Row information information    

Data Table #4 - 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 #4 in a Dark Box - Responsive + Caption

This is a Heading 3 Inside a Table Caption

Text goes inside the caption, it can have regular HTML inside it including headings.
Column 1 Header Column 2 Header Column 3 Header
Item 1 information information
Item 2 information information
Sub Header Row Header Another Header
Another Item information information
More Items information information
Even More Items Highlighted cell - information information
More Items information information
Still Items information information
Highlighted Row #1 information information
Highlighted Row #2 information information
Highlighted Row #3 information information
Highlighted Row #4 information information
Last Row information information