Tables

Working with tables is like working with spreadsheets, they are great at displaying tabbular data, but they do need to have a summary and headers to work propperly.  Tables also should not be used for layout of content as they do not read back the data to screen readers and other assistive technology appropriately.

We have some extra styles below that will help add functionality to your tables but first understanding table structure.

Good Table Design

Each table needs to have headers and a caption for accessibility.  You can learn how to do that on the toolbar basics. 

When formatting your tables the headers correspond to a data type as well as the content. 
For example: a field marked "Phone Number" can not include an email address. 

The default table layout

Starting in Version (5.24c and later) tables will have an equal layout style.  This means a two column table will be 50% width on each cell and a three column will be 33% width on each cell.  This will keep things aligned when using multiple tables and keep data from having wildly outsized columns.

table-data-center

If you want to have the cells all use centered for their default style apply the table-data-center class where you use it.  It will align the text in all cells to be centered without needing to update the alignment on each cell.  While editing data may appear left aligned as the style is added when presented in preview and published modes.

Basic Table

(no style class)

 

Department Contact Information

Column A	Column B	Column C	Column D
First Department	Address 1	Email 1	Mon - Fri
Second Department	Address 2	Email 2	Mon, Wed, Fri
Third Department	Address 3	Email 3	Tues, Thurs

table-min

removes the amount of lines across the table

table-alt

rows that have alternating colors

Mobile and Small Space Views

Tables are tough to read on small areas and small devices.  The layout will automatically change when viewing content in small areas to a per row view. 

This will keep your headings attached to each data entry.  Ensuring as users get further away from a "top" row, the labels remind them what each data entry is used for.

 

Department Contact Information

Column A	Column B	Column C	Column D
First Department	Address 1	Email 1	Mon - Fri
Second Department	Address 2	Email 2	Mon, Wed, Fri
Third Department	Address 3	Email 3	Tues, Thurs

Color Themes

You can adjust the color of headers, caption, and alternate rows for the standard theme colors.

Department Contact Information

Column A	Column B	Column C
First Department	Address 1	Email 1
Second Department	Address 2	Email 2
Third Department	Address 3	Email 3
Fourth Department	Address 4	Email 4
Fifth Department	Address 5	Email 5

Additional Table Features

To help make finding data easier we have two additional features, search and sortable headers.  You can add either of them or both to your tables.  Sortable headers will only work in full view, mobile and small format sections are too small to be effective.

table-search

A search box will appear above the table where you use this.  It will hide each row and only show rows where the seach has found at least something matching.

table-sort

This will make the table headers sortable on your table.  Clicking on the header text will sort the data A-Z or Z-A.

To make this work you need to identify which row is the header by using the editor's row properties and setting it to table header (thead).

This will make the other rows part of the table body (tbody) which is how we sort the table.

If you don't have these setup the table will not sort correctly.

 Tables are not sortable in mobile or small content models.