How to Add Tables to Help Articles

ProProfs Knowledge Base lets you add tables to showcase statistical information. Tables can enhance overall engagement and help users easily comprehend the data.

Adding tables allows you to display data correctly and make your help articles more interactive.   

Here's what the table will look like in a help article:

This article covers the following:

• Creating a Table
  • Table Properties
  • Advanced
• Working With Tables
• Editing & Deleting Table Rows
• Editing & Deleting Table Columns
• Cell Properties

Creating a Table

• Click Insert in the page editor and select Table. The Table Properties dialog window will open.

Table Properties

Below is an overview of all the elements of the Table Properties tab:

• Rows – The number of rows in the table (required).

• Columns – The number of columns in the table (required).

• Width – This sets the table's width in pixels or a percent value. Giving the width a percent value lets you set the proportion of the page that the table will occupy.

• Height – This sets the height of the table in pixels.

• Headers – You can format specific table cells as headers and apply special formatting to them. Choose the option from the header drop-down, viz., First Row, First Column, or both.

• Border size – This sets the thickness of the table border in pixels.

• Alignment – This sets the alignment of the table on the page. The following options are available: Left, Center, and Right.

• Cell spacing – It denotes the space between individual cells. And between cells & table borders. It is measured in pixels.

• Cell padding – It denotes the space between the cell border and its contents, measured in pixels.

• Caption – This is the label of the table that is displayed on top of it.

• Summary – This summary of the table contents is available for assistive devices like screen readers. It is an excellent practice to provide your tables with meaningful summary text to make them more accessible to users with disabilities.

Advanced

Advanced

The Advanced tab lets you configure additional table properties, such as assigning an ID, a class, a language direction, or a CSS style. It is meant for advanced users with knowledge of HTML and CSS.

Below is an overview of all Advanced tab elements:

• Id – This is a unique identifier for a table element in the page (id attribute).

• Language Direction – This sets the direction of the text in the table: Left to Right (LTR) or Right to Left (RTL).

• Style – This sets CSS-style definitions (style attribute). Note that each value must end with a semi-colon, and individual properties should be separated with spaces.

• Stylesheet Classes – This is the class of the table element (class attribute). Note that a table element might be assigned more than one class. If this is the case, separate class names with spaces.

Working With Tables

Once inserted into the document, you can modify the table. To edit the table, double-click it or open the table context menu by right-clicking on it or using the Menu/Application key on your keyboard.

Use the "Delete Table" option to delete the whole table and its contents.

The Table Properties option allows you to change the configuration settings when the table was created, except for the number of rows and columns grayed out.

The table context menu lets you modify the rows, columns, or particular table cells. You can insert new rows, columns, or cells in specified locations and even merge and split cells.

Editing & Deleting Table Rows

The table context menu lets you edit table rows. Additional options become available if you hover your mouse over "Row," as shown in the image below.

Below is an overview of all the Row context menu options:

• Insert Row Before – This inserts a new row before the one that contains the cursor.

• Insert Row After – This inserts a new row after the one that contains the cursor.

• Delete Rows – This deletes the row that contains the cursor.

Editing & Deleting Table Columns

The table context menu lets you edit table columns. If you hover your mouse over the Column menu option, additional options become available.

Below is an overview of all the Column context menu options:

• Insert Column Before – This inserts a new column before the one that contains the cursor.

• Insert Column After – This inserts a new column after the one that contains the cursor.

• Delete Columns – This deletes the column that contains the cursor.

Cell Properties

You can customize table cells to create a unique look & feel—Right-click on a cell to open the table context menu. Go to Cell > Cell Properties to access different configuration settings.

Below is an overview of all the Cell Properties dialog window elements:

• Width – This sets the cell's width in pixels or a percent value. Giving the width as a percent value lets you set the proportion of the row the cell will occupy. Suppose 100 is the total limit; if you set the percent value as 50, the cell will occupy half the row (and the column it is located in).
• Height – This sets the cell height in pixels.
• Cell Type – This defines whether the cell is a typical data cell or a header cell with special formatting. Generally, the header cells are the first row cells.
• Word Wrap – This setting turns word wrapping of the cell content on or off.
• Rows Span – This setting stretches the cell downward over several rows. Entering a numeric value sets the rowspan attribute.
• Columns Span – This setting stretches the cell to the right over several columns. Entering a numeric value sets the colspan attribute.
• Horizontal Alignment – This sets the horizontal alignment of table cell contents. The following options are available: Left, Center, or Right.
• Vertical Alignment – This sets the vertical alignment of table cell contents. The following options are available: Top, Middle, Bottom, or Baseline.
• Background Color – This is the color of the cell background. You can use either of the following methods to set the color:
  • Enter the RGB value in the text box in the RGB format (nn, nn, nn), where nn is a numeric value on a scale from 0 to 255 representing the red, green, and blue channels.
  • Enter the hexadecimal RGB value in the text box in the #nnnnnn format, where the n letters stand for the three pairs of hex color values representing the red, green, and blue channels.
  • Use the Choose button to open the Select Color dialog window and pick the color with your mouse.
• Border Color – This is the color of the cell border. You can use either of the following methods to set the color:
  • Enter the RGB value in the text box, in the RGB format (nn, nn, nn), where nn is a numeric value on a scale from 0 to 255 representing the red, green, and blue channels.
  • Enter the hexadecimal RGB value in the text box in the #nnnnnn format, where the n letters stand for the three pairs of hex color values representing the red, green, and blue channels.
  • Use the Choose button to open the Select Color dialog window and pick the color with your mouse.

That is all about adding tables in the Knowledge Base articles.