Tables in Advanced WYSIWYG editor

Plans supporting the use of Advanced WYSIWYG editor

Professional
Business
Enterprise






Tables are an essential tool for organizing and presenting data in a clear, structured format. Whether you're comparing features, listing options, or summarizing information, tables enhance content readability and make complex data easier to understand.

The Advanced WYSIWYG editor offers a range of powerful table formatting and management features designed to help you easily create visually appealing and functional tables. From adding rows and columns to customizing cell colors and implementing advanced table styles, these features help you create tables that meet your specific needs.

In this article, we will explore the various table-related tools available in the Advanced WYSIWYG editor, providing you the steps to create, format, and manage tables.

Creating a table

There are two methods for creating a table:

  • Slash (/) command

  • Insert option in the Format menu

Slash (/) command

To insert a table using the slash command, type the slash command (/table) anywhere in the editor, and hit Enter. This inserts a 3X3 table in the editor at the text cursor’s location.

NOTE

Inserting a table using the slash (/) command will always insert a 3X3 table with a header row by default. You can insert more rows and columns as per your requirement.

Insert option in the Format menu

To insert a table using the Format menu,

  1. Click the Insert option in the Format menu on the right side of the editor to open the Insert menu.

  2. From the Insert menu, click on the Table option.

  3. Clicking the Table option opens the Insert table grid. Select the desired table size from the grid to insert the table in the editor.

NOTE

The maximum table size you can create from the Format menu is a 10X10 table. You can add additional rows/columns manually.

Formatting table content

Inserting or deleting rows/columns

To insert a row, select an entire row. In the menu that appears upon selecting the row, click Insert row above/Insert row below based on your requirement. Similarly, to insert a column, select an entire column. In the menu that appears upon selecting the column, click Insert column left/Insert column right based on your requirement.

Select the entire row, then click Delete row in the menu. You can delete a column using the same steps after selecting a column.

Merging cells

To merge cells, select multiple cells in the table. After selecting multiple cells, click Merge cells in the menu. Once you click the Merge cells option, the selected cells will be combined together into one cell.

Cell alignment

To align text within a cell, select one or more cells, and select the alignment option that appears in the menu. There are two alignment options available: Vertical align and Horizontal align.

Vertical align

If you select the Vertical align option, you can align the text to either the Top, Middle, or Bottom of the cell.

Horizontal align

If you select the Horizontal align option, there are four options available: Left, Center, Right, and Justify. If you select either Left, Center, or Right, the text will be aligned accordingly. If you select Justify, the text will be aligned to the left, while the text will be equally spaced to cover the entire width of the cell.

Fit table to page width

To fit a table to the page width, select the table. In the menu that appears upon selecting the table, click the Fit to page width option. This will automatically adjust the table to span the full width of the page, ensuring the content within the table is evenly distributed across the available space.


Customizing table appearance

Changing background

  1. To change the cell background color, select one or more cells.

  2. In the menu that appears, click the Background color option.

  3. Select the desired color from the displayed color palette.

PRO TIP

Once you make updates to the background color in tables, check the article preview in dark mode to verify the table’s visibility.

Changing border

Border color

  1. To change the cell border color, select one or more cells.

  2. In the menu that appears, click the Border color option.

  3. Select the desired color from the displayed color palette.

Border style

  1. To change the border style, select the entire table.

  2. In the menu that appears, click the Border style option.

  3. Choose your preferred border style: Solid, Dashed, or Dotted.

Header rows

The top row is a header row by default when you insert a table in the Advanced WYSIWYG editor. The header row is indicated with the grey background.

  • If you want to hide the header row, select the entire table and click the Hide table header option.

  • If you have hidden the header row and wish to show it again, select the entire table and click the Show table header option.

Alternate row style

To customize your tables even further, you can choose to have banded rows. If you implement this option, the color of your rows will alternate between white and light gray.

  1. To implement this customization, select the entire table.

  2. In the menu that appears, click the Alternate row style option.

PRO TIP

You can customize your tables even further using CSS code snippets. To learn more, visit the Table Style article.  


FAQs

How do I copy the entire table?

To copy the table, select the entire table and click the Copy option that appears in the menu.

How do I delete the entire table?

To delete the table, select the entire table and click the Delete option that appears in the menu.

Can I use automatic number in a table?

While numbered lists are possible within a cell, you cannot apply automatic number for rows in a table.

Can I add symbols or icons in a table?

Yes, you can add symbols and icons in a table. For in-built symbols/icons, you can them directly from the Format menu. Symbols and icons from external sources can be added using HTML. To add symbols/icons in HTML,

  1. Switch to Code view within the editor.

  2. Place the text cursor in the desired location.

  3. Paste the HTML code for the required symbol/icon.

Now, the symbol/icon should be visible within the table in the editor.

Will slash commands work inside a table?

Yes, all the slash commands will work inside a table.