Managing tables in the editor

What is a table?

A table is a grid divided into rows and columns that keeps your content organized within individual cells. Tables are best used for structured data, side-by-side layouts, or organizing a page's content.

To create or edit a table, open an article or a contact center message, place your cursor where you want the grid to appear, and use the table toolbar icons.

Inserting a table

To add a new table to your page, follow these steps:

1. Place your cursor in the editor exactly where you want the table to go, then click the Insert/Edit Table icon.
   
2. In the pop-up box, enter the number of Columns and Rows you want your table to start with.
3. Adjust your lines and spacing:

• Enter a number in Border to set line thickness.
• Use Cell Padding to create breathing room between text and cell edges.
• Use Cell Spacing to control the distance between individual cells.

Click the green Insert button. Your initial table will look tiny, but it will automatically stretch as you type text or add images into the cells.

Design note: Leave the height and width fields blank when first creating a table. Setting fixed pixel dimensions can break your layout on mobile screens.

Managing table and column widths

Mixing cut-off content

A common issue occurs when a table is too wide to fit the page, forcing an awkward horizontal scroll bar to appear. The system template width limits your page layout (typically to 700 pixels). To prevent text and layouts from cutting off, use these tactics:

• Pre-size your images: A table always remembers an image’s original size when first inserted. If you insert a 1000-pixel-wide image and shrink it using the editor handles to 300 pixels, the table still calculates it at 1000 pixels, breaking the page layout. Always resize your images before uploading them into a table.
• Use percentage widths: Change the table width to 100% in the properties window. This forces the table to dynamically fluidly scale to fit the reader's screen, whether they are on a desktop or a phone.

Setting equal column widths

To ensure columns distribute evenly (for example, making each column in a 4-column table exactly 25% wide):

1. Click inside the very first cell of the column.
2. Click the Table Cell Properties icon.
   
3. In the Width field, type 25% and click update.
4. Repeat this process for the first cell of each remaining column. Because cells in the same column share width constraints, the rest of the rows will align automatically.

Modifying rows, columns, and styling

Adding and removing rows and columns

Once a table is created, you cannot change its structure using the main insert button. Instead, click inside a cell next to the area you want to change and use the specific structure icons:

• Insert Row Before / After: Adds a new horizontal row directly above or below your cursor.
  
• Delete Row: Instantly removes the entire row your cursor is currently in.
• Insert Column Before / After: Adds a new vertical column to the left or right of your cursor.
• Delete Column: Instantly removes the entire column your cursor is currently in.

Creating borderless tables

To use a table for page layouts without showing gridlines to visitors:

1. Click inside the table and open the Insert/Edit Table icon window.
2. Open the Class drop-down menu and scroll to the very bottom to select (value).
3. In the blank text field that appears next to it, type the word "borderless" and save.
4. The grid lines will show as dotted lines in the backend editor for your reference but will be completely invisible on your live website.

Centering a table on the page

Tables cannot be centered using the standard alignment icons on your toolbar. To center a table, you must briefly access the HTML source code:

1. Click the HTML button (the last icon on the bottom row of the editor) or click Toggle Editor in the bottom-left corner.
   
2. Use "Ctrl + F" (or "Cmd + F" on a Mac) to search for the opening table tag: "<table"
3. Add a <center> tag on the line directly above it:
   <center>
   <table border="0">
4. Find the closing table tag at the end of your grid data: </table>
5. Add a "</center>" tag on the line directly below it:
   </table>
   </center>
6. Toggle the editor back or save your changes. Your table will now be perfectly centered on the page.

Advanced cell functions

Click inside a specific cell and select the Table Cell Properties icon to access advanced layout settings:

• Center text vertically or horizontally: Open the Alignment drop-down menu and select Center to align that cell's specific content.
• Add background or border colors Click the Advanced tab inside cell properties. You can manually enter a hex color code in the text box or click the square color picker icon next to Background Color or Border Color to visually choose a shade.
• Avoid fixed heights: Do not give table cells or rows a fixed height. If you don't fill the space, it leaves large gaps of empty layout; if you add too much text, the table will fail to expand, causing text to overlap and clip. Always let content dictate the height naturally.