Advanced Table Block
Introducing the Advanced Table Block for Gutenberg. Designed to make web content more inclusive and user-friendly, this block allows you to effortlessly create tables that meet the highest standards of accessibility, ensuring that all users, regardless of their abilities, can access and understand your data. Whether you’re presenting data, statistics, or any tabular information, this block empowers you to do it with accessibility and style.
Table of Contents
Example
List 4 UBC faculties with the number of departments and programs. The data is auto-generated by Chat-GPT and might not be reliable.
| Faculty | Number of Departments | Number of Programs |
|---|---|---|
| Faculty of Arts | 20 | 50+ |
| Faculty of Science | 9 | test |
| Faculty of Medicine | 19 | 50+ |
| Faculty of Law | 1 | 3 |
Settings
Styles
The Advanced Table block comes with 2 pre-defined block styles, ‘Default’, and ‘Stripes’. You can find them in the block settings, under ‘Styles’.
Default
Stripes
Max Width In (px)
This setting allows you to change the max width of the table block in pixel value. The default value is 100% of the parent container width.
Fixed width table cells
By enabling this setting, All the table columns will be forced to have equal width.
Table header
By enabling this setting, a new table header section will appear as the first row of the table.
Table footer
By enabling this setting, a new table footer section will appear as the last row of the table.
Table caption
By enabling this setting, a new table caption section will appear as the top section of the table.
Mobile Friendly
The Advanced Table Block is not mobile-friendly if you have too many columns in it, same as any other HTML table. A horizontal scroll bar will appear on smaller screens instead.
Accessibility
The Advanced Table Block, by default, conforms with WCAG 2.1 AA Guidelines, ensuring that all users can navigate and interact with its content easily and effectively. Please ensure the content you put into your table also conforms with the same standards.
How to use the block on UBC CMS?
Navigate to your site’s Dashboard on UBC CMS and go to Plugins. Search for Advanced Table Block and activate the plugin. proceed to the specific post or page you wish to edit. Click the + button located in the top-left corner or in the desired location on the page to add a block. Finally, search for Advanced Table to insert it into your content.