Table style example

This example uses HTML field controls to format a table in a knowledge article.

About this task

Figure 1. Table example html
Table example html

To add the formatted table to a knowledge article:

Procedure

  1. Navigate to Knowledge > Edit and select the article to edit.
  2. In the HTML field, position the cursor in the location for the table.
  3. Click the table icon, click Insert table, and then select the number of rows and columns.
    Insert table
  4. Complete the following steps to edit the table properties.
    1. Position your cursor in the table, click the table icon, and select Table properties.
    2. Enter the following values on the General tab.
      • Width: 75%
      • Cell spacing: 3
      • Cell padding: 3
      • Border: 1
      • Alignment: Left
    3. On the Advanced tab, click the text field next to Border color and enter Gray.
      The color picker box to the right turns gray to indicate the color that you entered. You can also click the box and select the color in the palette.
    4. Click Ok.
  5. Complete the following steps to update the header table row.
    1. Select the cells in the first table row, click the table icon, and select Row > Row properties.
    2. Enter the following values on the General tab.
      • Row type: Header
      • Alignment: Center
    3. On the Advanced tab, enter #87cefa in the text box beside Background color to set it to a light blue.
    4. Click Ok.
  6. To set cell properties, complete the following steps.
    1. Select all table cells in the first column except those cells in the header row, click the table icon, and select Cell > Cell properties.
    2. Enter the following values on the General tab.
      • H Align: Left
      • V Align: Top
    3. Click Ok.
    4. Repeat these steps for the table cells in the second column.
  7. To set the background color of the middle row, complete the following steps.
    1. Position your cursor in the middle table row, click the table icon, and select Row > Row properties.
    2. On the Advanced tab, enter Silver in the text box beside Background color to set it to color #c0c0c0.
    3. Click Ok.
    Repeat this procedure for every other table row.
  8. To set column width, complete the following steps.
    1. Click the first column of the table, click the table icon, and select Cell > Cell properties.
    2. On the General tab, enter 30% in the Width text field.
    3. Click Ok.
  9. Right-click the form header and click Save.
  10. Enter data in the table cells and then save the article.