Tables are best used to display tabular data on your page.
| Note |
|---|
Tables are a complicated topic. While useful for organizing data, they can problematic if too complex. A complicated table with many columns and rows may display fine on a computer screen, but may not work well on a tablet or phone screen. |
Table of Contents
| Table of Contents | ||
|---|---|---|
|
Insert a Basic Table Via the WYSIWYG
1. Select the desired page in the Site Content menu on the left.
2. In Edit mode, scroll down your page to the desired section where you would like to place a table. e.g. on a new line after a paragraph of text.
3. From the Table menu hover over Table and select the number of rows and columns you would like to include in your table. Click to insert into your page.
| Info |
|---|
In this example, the table has four rows and three columns. |
4. Add your content to the blank table cells.
| Info |
|---|
When saved, default tables (with no styling) will be set to 100% width (of the page), with alternate background colors between rows (also known as striped rows). For example, the table below has a light gray background for the odd rows and white for the even ones. This is one way to improve the readability of large tables. |
Result:
Styling a Basic Table
1. With the table selected, click on the Formats drop-down, then Custom, then select either the Table Stacked or Table Unstriped class.
Table Unstriped
To remove the alternating background colors, select the Table Unstriped class.
| Info |
|---|
When the Table Unstriped class is selected, you will remove the alternate background colors (stripes) between rows. Row 1 will now be white, as will rows 2, 3, etc. See example below. |
Result:
Table Stacked
To stack a table on small screens, select the Table Stacked class.
| Info |
|---|
When the Table Stacked class is selected, table rows will be striped and 100% width, like default. However, in small screens (mobile) the row content will stack. See example below. |
Result:
