Adding a table to a CMS article body
In items of the Article Type model in Studio.Design CMS (CMS article items), you can insert a table at any position within the rich text property (body).
This is useful when you want to compare multiple items in a list, such as pricing plans, event schedules, or product specs.
For tables you've added, you can set headers and adjust width, color, and more in the Design Editor.
Note: Table feature limitations and recommended conditions
Tables with more than 80 rows or columns may cause issues when editing in the CMS dashboard. If needed, split the table so that each one has 80 or fewer rows and columns.
The following features are not supported:
Adding a table inside another table
Setting header cells (th) across multiple rows or columns
Setting header cells (th) anywhere other than the first row or column
Merging cells
Setting the caption element
Setting the thead element
Setting the tfoot element
Setting the scope attribute
*The video reflects the Studio.Design specifications at the time of publication.
Adding a table to a CMS article item
In the CMS dashboard, open the detail edit screen of the CMS item for the target "Article Type" model.
Place the cursor where you want to insert the table, then click the [+] button on the left side of the detail edit screen.
Select [Table] from the suggested options to add a 3-column by 2-row table that includes a header row.
Setting table alignment
Use the icon at the top right of the table to align it left, center, or right.
Duplicating and deleting tables
To duplicate a table, select it and copy and paste.
To delete a table, select it and press the Delete key, or use the block menu.
Adding or deleting rows and columns in a table
Click a cell in the table.
Click the triangle row (or column) menu that appears to add or delete rows (or columns). You can also add rows or columns using the add button below the table or at the right edge.
You can't swap rows and columns directly, but you can copy and paste cell contents to move them.
Setting row and column headers (th)
The top row and leftmost column of a table can be set as header cells (th). Header cells act as titles that describe the data within the table.
Click the cell you want to use as a header.
Click the triangle row (or column) menu that appears and turn on the [Column (Row) header] toggle.
Editing cells (td)
You can enter text in cells (td) within a table. When you select text, a menu appears where you can use the following settings and features:
Bold
Italic
Strikethrough
Comments
Keyboard shortcuts:
Insert a line break within a cell: Shift + Enter
Select multiple cells: Shift + arrow keys
Pasting tables created in external tools
You can paste tables created in external tools such as Google Sheets or Notion.
Select the entire table in an external tool like Google Sheets or Notion, then copy it.
Open the CMS dashboard in Studio.Design.
Open the detail edit screen of the CMS item for the target "Article Type" model and paste it where you want the table to appear.
Note: Copying tables from Notion
Only simple tables | Notion Help Center can be copied from Notion. Database-style tables can't be pasted.
Designing your table
Like other elements, you can adjust the layout and appearance of tables. This is done in the Design Editor.
Applying design settings to the entire table
In the Design Editor, open the CMS article page (dynamic page) where the table is placed.
Select the table <table> placed inside the rich text box.
Open the relevant tab in the right panel based on what you want to change. If the panel is closed, open the right panel.
To configure the layout or appearance of the table itself, open the [Box] tab and adjust the settings under [Layout] or [Appearance].
To change the style of the text inside the table, open the [Content] tab and adjust typography and other settings.
Changing the style of headers and cells
In the Design Editor, open the CMS article page (dynamic page) where the table is placed.
Select a header (th) or cell (td) in the table placed inside the rich text box.
Open the relevant tab in the right panel based on what you want to change. If the panel is closed, open the right panel.
To configure the layout or appearance of the header or cell itself: Open the [Box] tab and adjust the settings under [Layout] or [Appearance].
To change the style of text inside the header or cell: Open the [Content] tab and adjust the settings.
Note: About header and cell style settings
Settings applied to a cell (td) are automatically applied to header cells (th) as well.
If you select underline in the typography settings, the underline setting is not inherited between header cells (th) and cells (td).
If you apply a style directly to a header cell, that style takes priority.
Style settings for row headers and column headers (th) are shared. They can't be set separately.
Setting a minimum width for a column in a table
You can set the minimum width of a column in px. Other size units are not supported.
In the Design Editor, open the CMS article page (dynamic page) where the table is placed.
Select a header (th) or cell (td) in the table placed inside the rich text box.
Open the [Box] tab in the right panel. If the panel is closed, open the right panel.
Enter a value in the [Min width] field under [Layout].
The [Min width] field is not shown when the entire table <table> is selected.
Tips for improving accessibility
There are two key points for improving table accessibility:
Use header cells (th)
Assistive technologies like screen readers read header cells (th) and data cells (td) together. Without header cells, users have a harder time understanding which row or column a cell belongs to.
References
Place a heading (h1, h2 element, etc.) immediately before the table
We recommend placing a heading (h1, h2 element, etc.) immediately before the table.
WCAG 2.0 Success Criterion "1.3.1 Info and Relationships (*1)" requires that the structure and relationships of information be conveyed to users of assistive technologies as well.
There are two common ways to meet this criterion:
Set a caption element on the table (currently not supported in Studio.Design) (*2)
Place a heading immediately before the table (*3)
Since Studio.Design doesn't support setting the caption element, we use the method of placing a heading before the table. Connecting the heading with the contents of the table makes it easier for assistive technology users to anticipate what the table contains and helps preserve the relationship between the information.
References
For more about building with accessibility in mind, also check out the Studio.Design Accessibility Checklist.
Table layout