Insert a Table in a Knowledge Article

Overview

Properly using tables ensures that individuals relaying on assistive technologies, such as screen readers, can effectively access and understand the content being displayed.

When using tables within knowledge articles ensure they align with the following requirements:

• Tables should only be used to display data in a grid. Do not use them as a means for content layout. As a general rule, tables are not meant to be used for layout purposes.
• Caption: A caption identifies the overall topic of a table and is useful in many situations.
• Header: Every table must have at least one header. Either a header row, header column, or both.

Tables should use the built in table styles it is recommended to add in additional formatting properties for easier reading such as stripes, hover and borders as seen below.

In this article:

• Insert a Table
• Format a Table
• Add a Table Column
• Add a Table Row
• Example Tables

Insert a Table

1. Open the desired knowledge article
2. Click Edit.
3. Locate the desired location for the table, and click to place focus.
4. On the Formatting toolbar, click Table.
5. In the Table Properties dialog, do the following:
   1. In the Rows field, enter a number that represents the number of rows the table should have.
   2. In the Columns field, enter a number that represents the number of columns the table should have.
   3. In the Headers drop-down menu, select the option that represents where the table's header will reside.
   4. In the Caption field, enter a succinct title that represents the table's purpose.
   5. Optionally, select one, or more of the following formatting options:
      • Add strips - Adds css style to the table which causes alternating rows to have a different background color (this is also known as zebra strips).
      • Add hover effect - Adds css style to the table which causes the a table row to highlight when the mouse pointer moves over it.
      • Add borders - 
      • Compact style table - 
   6. Click Ok.
6. The table element will be inserted.
7. Enter information/data in the table fields as appropriate.

Format a Table

Primary formatting of a table is done through the Table Properties dialog.

1. In the desired table, right-click and select Table Properties.
2. In the Table Properties dialog the following properties can be changed.
   • Headers - 
   • Caption - 
   • Add strips - Adds css style to the table which causes alternating rows to have a different background color (this is also known as zebra strips).
   • Add hover effect - Adds css style to the table which causes the a table row to highlight when the mouse pointer moves over it.
   • Add borders - 
   • Compact style table - 
3. Click Ok to apply the changes, and close the Table Properties window

Applying Service Portal Theme to a Table

It is possible to apply the Service Portal's theme to a table's header row(s)/column(s); however, it can only be done using the Source option in the Formatting toolbar. This is a straightforward way to apply the same visual color theme to the table in a way that if the article has a shortcut created to it from another Service Portal, a person reading the article on the other Service Portal will see that portal's theme.

1. In the Formatting toolbar, click Source.
2. The article's body content will change to the raw HTML view.
3. Scroll down to the section which contains the table you want to format.
   Tip

   Use the table's caption as a quick, easy way to identify the correct table.
4. Locate the first header cell. It will look something like the following

   <th scope="row">Header Text</th>

5. Add the following text: class="hilite", so the header cell now looks like the following:

   <th scope="row" class="hilite">Header Text</th>

Add/Remove Table Column

Add Table Column

1. Right-click the table column where you want the new column to be adjacent to.
2. In the contextual-menu, mouse over Column, then select either Insert Column Before (i.e. add column to the left of the column you right-clicked in), or Insert Column After (i.e. add column to the right of the column you right-clicked in).
3. The new table column will appear.

Remove Table Column

1. Right-click the table column that you want to delete.
   Tip

   Multiple columns can be deleted at the same time by using the mouse to highlight the desired columns. Columns must be adjacent/contiguous.
2. In the contextual-menu, mouse over Column, then select Delete Columns.
3. The selected table column(s) will be deleted.

Add/Remove Table Row

Add Table Row

1. Right-click the table row where you want the new row to be adjacent to.
2. In the contextual-menu, mouse over Row, then select either Insert Row Before (i.e. add row to the above of the row you right-clicked in), or Insert Row After (i.e. add row to the below of the row you right-clicked in).
3. The new table row will appear.

Remove Table Row

1. Right-click the table row that you want to delete.
   Tip

   Multiple-rows can be deleted at the same time by using the mouse to highlight the desired rows. Rows must be adjacent/contiguous.
2. In the contextual-menu, mouse over Row, then select Delete Rows
3. The selected table row(s) will be deleted.

Example Tables