You can add tables via the text editor whenever you need to present multiple sets of data or other information for comparison.
Tables can be a useful way to present content when you need to organize information for comparison, such a prices or program descriptions. However, large tables don't scale well on mobile and can often become difficult to read, so they should be used sparingly and only when appropriate for the information you are trying to display. Tables should not be used to format images or other content. Some good examples of when to use tables:
Example tables
Table with a 1px border
| Header row and column | Column 1 | Column 2 | Column 3 |
|---|---|---|---|
| Row 1 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Row 2 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Row 3 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
Table with no border
| Header row and column | Column 1 | Column 2 | Column 3 |
|---|---|---|---|
| Row 1 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Row 2 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Row 3 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
Adding a table
- Go to the page where you want to add your table and click "edit."
- Scroll to the body field or where you want to add your table and click on the table icon:
- Select the number of rows and columns that you would like in your table. Note that any table with more than 4 columns might not be as easy to read on mobile.
- If you would like a header row and/or column on your table you can select the option for one or both via the headers drop-down.
- Change the width to 100% so that your table will be responsive across different device sizes.
- Optional: change the table border size to 0.
- Click okay to add your table to the body.
- Add text to your table via the text editor.
- If you need to add more rows to your table you can hit the "tab" button on your keyboard from the last cell in the table. You can also right click anywhere on the table and select "table properties" to adjust the number of rows and columns in your table.
- Once you are finished, click "save" on the page to save your changes.