Tables
User Guide Tables
Overview
Use this tool to:
- Build and style tables in content
- Convert tables to columns
Related Tools:
Interface
The following panels will describe what can be accomplished in each section of this tool:
Content
The following controls are available in the Content section:
- 1. Table Structure
- Selects which part of the table you want to edit based on cursor position.
- 2. Convert table to columns
- Changes the HTML element from a table to flex columns.
- 3. Cell alignment
- Align cells horizontally and vertically.
- 4. Width and Height
- Adjusts selected table structure's width and height as percentage or pixel.
- 5. Clear Width and Height
- Removes any specific width or height settings.
- 6. Delete Selected Table Structure
- Removes the selected table structure contents from the Canvas editor.
Style
Use the tools in the Style section to:
- 1. Base Style
- Apply background color styles.
- 2. Border Style
- Toggle borders on and off.
Advanced
The Advanced panel provides the following options:
- 1. Structure options
- Add headers, footers, or captions to the table.
- 2. Other Options
- Toggle additional options and styles.
Instructions
Add a Table
To add a new table:
- Place your cursor in the editor where you want the table to go.
- Open the Add menu.
- Select Table.
Style a Table
To add styling to your table:
- Place your cursor within the table.
- Make sure you are in the Edit Current Element tab.
- Choose the Table option as the active tool.
- In the Style panel:
- Select your preferred Base Style.
- Select your preferred Border Style.
- In the Advanced panel, select from the following Other Options as desired:
- Sortable - make the table interactively sortable for viewers
- Row Hover - add a light gray background that will appear while a user is hovering over any given row.
- Striped Rows - provides alternating gray backgrounds for the table's rows, to help visually differentiate the data.
- Condensed - removes the extra padding around table content, making it easier to see a large amount of data on one screen.
Apply Accessibility Considerations to a Table
To add accessibility considerations to your table:
- Place your cursor within the table.
- Make sure you are in the Edit Current Element tab.
- Choose the Table option as the active tool.
- In the Advanced panel, select from the following in the Structure section as is applicable:
- Column Headers - If the top-most row helps users understand the data beneath it.
- Row Headers - If the left-most column helps users understand the columns that follow it to the right.
- Footer Row - if you have a row at the bottom that is a summation/total row.
- Caption - creates a space where you can briefly title/describe the table's content for screen reader users.
Make a Table Sortable
To add interactive sorting to your table:
- Place your cursor within the table.
- Make sure you are in the Edit Current Element tab.
- Choose the Table option as the active tool.
- In the Advanced panel, under Other Options, select Sortable.
Make All Table Columns Equal Width
To make equal table columns width:
- Place your cursor within the table.
- Make sure you are in the Edit Current Element tab.
- Choose the Table option as the active tool.
- Select the Column option from the table structure list.
- Change the width to the correct percentage. (4 columns = 25%, 5 columns = 20%, etc)
- Place your cursor in the other columns of the table and change their width percentages to the same value.
Remove a Table
To remove a Table:
- Place your cursor within the table.
- Make sure you are in the Edit Current Element tab.
- Choose the Table option as the active tool.
- In the Action Toolbar panel, click the Delete Table button.
Convert a Table to Responsive Columns
To change an html table to a responsive column structure:
- Place your cursor within the table.
- Make sure you are in the Edit Current Element tab.
- Choose the Table option as the active tool.
- In the Content panel, select the Convert Table to Columns button.
Resources
Examples
| Column Heading | Column Heading |
|---|---|
| Content | Content |
| Content | Content |
| Row Heading | Content | Content | Content |
|---|---|---|---|
| Row Heading | Content | Content | Content |
| Row Heading | Content | Content | Content |
Design Considerations/Best Practices
Please consider the following when choosing to use tables:
If you're using tables to design using horizontal space or grids, use the Convert Table to Columns feature or Link Grid tools instead. Columns are responsive to screen size and allow for more consistent layouts.
- Tables should have a head row or head column to work with assistive technology.
Legacy Comparison
The new DesignPLUS Sidebar allows users to customize table, row, column, or individual cells. It also has a new alignment option not available in the legacy version. The convert table to columns feature is also new.