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 contact center message, place your cursor where you want the grid to appear, and use the table toolbar icons.

Inserting a table

1. Place your cursor where you want the table to appear.
   
2. Select the Insert/Edit Table icon.
3. Enter the number of Columns and Rows you want.
4. Adjust lines and spacing:
   • Enter a number in Border to set line thickness.
   • Use Cell Padding to add space between text and cell edges.
   • Use Cell Spacing to control the distance between individual cells.
5. Select Insert. The table will appear small at first but stretches automatically as you add content.

Managing table columns and widths

Preventing cut-off content

A common issue occurs when a table is too wide for the page, causing an unwanted horizontal scroll bar to appear. The system template typically limits page layout to 700 pixels. Use these tactics to prevent content from being cut off:

• Pre-size your images: A table calculates an image's original size, not its display size. If you insert a 1000-pixel image and shrink it to 300 pixels using the editor handles, the table still calculates it at 1000 pixels, breaking the layout. Resize images before uploading them into a table.
• Use percentage widths: Set the table width to 100% in the properties window. This forces the table to scale dynamically to fit the reader's screen.

Setting equal column widths

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

1. Select the first cell in the column.
2. Select the Table Cell Properties icon.
   
3. Enter 25% in the Width field.
4. Select Update.
5. Repeat for the first cell of each remaining column. Cells in the same column share width constraints, so the remaining rows align automatically.

Modifying rows, columns, and styling

Adding and removing rows and columns

Select a cell next to the area you want to change, then select the appropriate icon:

• Insert Row Before / After: Adds a new row directly above or below the selected cell.
  
• Delete Row: Removes the entire row containing the selected cell.
• Insert Column Before / After: Adds a new column to the left or right of the selected cell.
• Delete Column: Removes the entire column containing the selected cell.

Creating borderless tables

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

1. Select inside the table.
2. Select the Insert/Edit Table icon.
3. Open the Class drop-down menu and scroll to the bottom to select (value).
4. Enter borderless in the text field that appears.
5. Select Save.

Centering a table on the page

The standard alignment icons in the toolbar cannot center a table. To center a table, edit the HTML source code directly:

1. Select the HTML button (last icon on the bottom toolbar row) or select Toggle Editor in the bottom-left corner.
   
2. Press Ctrl+F (or Cmd+F on Mac) and 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: </table>

5. Add a </center> tag on the line directly below it:

   </table>
   </center>

6. Select Toggle Editor to return to rich text view, then select Save.

Advanced cell functions

Select inside a specific cell, then select the Table Cell Properties icon to access these layout settings:

• Center text vertically or horizontally: Open the Alignment drop-down and select Center.
• Add background or border colors: Select the Advanced tab in cell properties, then enter a hex color code or use the color picker next to Background Color or Border Color.