The Table component should be used to organize and display data. Tables should not be used for page layout purposes – use the Column Layout component for layout.

The default table created for the component includes three columns and two rows, but the component has tools that allow you to add or remove both columns and rows. Columns can be added left or right, and rows can be added above or below.

One of the features of the revised Table component is that more complex tables can now be made accessible – cells can be merged or split, either vertically or horizontally. While these options have always been available, the results are now accessible. Cells can be merged horizontally, labeled as “Merge right” -- or split horizontally. They can also be “merged down” – in other words merged vertically – or them can be split vertically. 

However, please be aware that if you merge or split cells, sorting columns will be disabled. The sorting function is only possible with simpler, regular table layouts.

A Title field is required for every table in order to meet accessibility standards. You can also specify what heading level to apply to the Title – the default is H2. All page headings should be in sentence case, not Title case. An optional Description field will display below the Title and above the table.

It is technically possible to drag images into a table cell but we had previously discouraged this practice, since alternative text does not get imported the same way it does with the Image component. Since images aren’t inherently intended for tables, it may take some trial and error to drag your image to the correct cell. 

If it’s necessary to add an image to a table, by default it will be treated as decorative with no alt text. If the image conveys information or meaning inside the table, you MUST manually add the alternative text. To do this, select the image inside the table and then click the new Image icon on the toolbar. You can then add you alternative text for the image. Images cannot be sized inside a table.

The default alignment style is using a top row header, in which case any table with more than two rows can be sorted by the column headers.

Alternatively, you can assign left column headers to your table, in which case sorting is disabled.

Font size can be set – the default is “Small.” 

By default, a simple search function is enabled for tables to help users locate information, but the search function can be disabled. For extremely long tables, you can also enable a pagination function that will display table results in groups of 10 and allow users to navigate to additional groups or show all rows.