Knowledge Base: Working with Tables

Summary

This article provides information about working with tables in the TeamDynamix (TDx) Knowledge Base (KB) Editor. This article is intended for KB editors.

Note: In TeamDynamix, certain table attributes display differently in Edit mode than they do in normal View mode.  We strongly recommend that you use the Save as Draft button then view the Pending Draft to see how the table appears to viewers. Once everything appears in the Draft as you want it, then use the Update Article button to commit those changes as a new article revision.

• Inserting an Empty Table
• Pasting a Table from Excel or MS Word - see Knowledge Base: Pasting Tables from Excel or MS Word
• Formatting a Table
• KB Template - Formatted Table
• Further Readings
• Need additional help?
• Appendix - Table Properties Examples

Inserting an Empty Table

There are two ways to insert an empty table into a KB article when editing the article:

• Method 1: Using the Table button in the toolbar
• Method 2: Through the HTML Source code editor

After you have the empty table, then you fill in the information you want to see in each block or cell.

Method 1: Using the Table button in the toolbar 

Instructions

Step 1 - Click the Table button in the KB Editor toolbar.

Step 2 - Adjust the Table Properties (see table property examples in the appendix below) depending on your needs.

• Rows - Rows is the number of lines in a table, including a header row if there is one
• Columns - Columns is the number of data cells in each row. Columns are formed by placing data cells in the same order within each row.
• Headers - Headers provide labels for the data in the corresponding row or column and are usually set in bold.
  • Headers are required for accessibility.
• Caption - A caption provides a title or brief explanation of the table.
  • Captions are recommended for accessibility.
• Add Stripes - Striped tables alternate row background colors (e.g., light gray and white) to improve readability.
• Add Hover Effect - A hover effect highlights a table row when the mouse pointer moves over it.
• Add Borders - Borders outline the cells in a table. They help separate and organize table content visually.
  • Borders can be applied with greater control using the border attribute in the HTML Source code or with CSS (Cascading Style Sheets, e.g., border: 1px solid black; ).
• Compact Style Table - A compact table uses less padding and tighter spacing to display more information in a smaller area.

Step 3 - Click into each cell and type the information you want to appear in that block.

Step 4 (recommended) - Use the Save as Draft button to save your article, then view the Pending Draft to be sure the table appears where you want it and with the properties you want.  Edit the draft to tweak the appearance and content of the table, if necessary, then Save as Draft again.  Once everything appears in the Draft as you want it, then use the Update Article button to commit those changes as a new article revision.

Step 5 - If needed, right-click in the table and choose Table Properties or other options to adjust the table to suit your needs. See more details about formatting tables below.

Outcome

You have inserted an empty table in your KB article. You are able to add the content you want into the table cells.

Back to top 

Method 2: Through the HTML Source code editor 

Instructions

Warning: This is for people who are comfortable reading HTML source code to find where to place the empty table.

Step 1 - Select Source to switch to the source code editor

Step 2 - Find the place in the source code where you want the table to appear in your article. 

Step 3 - Add a couple of blank lines, then paste this template in those blank lines.

Note: This template is a blank table without any properties - no headers, TDx default borders (top only, no sides or bottom borders)

Step 4 - Click the Source button again to exit the source code editor.  You will see the empty table where you inserted it.

Empty Table in KB Editor view:

Step 5 - Click into each cell and type the information you want to appear in that block.

Step 6 (recommended) - Use the Save as Draft button to save your article, then view the Pending Draft to be sure the table appears where you want it and with the properties you want.  Edit the draft to tweak the appearance and content of the table, if necessary, then Save as Draft again.  Once everything appears in the Draft as you want it, then use the Update Article button to commit those changes as a new article revision.

Step 7 - If needed, go back into the HTML source to adjust the table to suit your needs. See more details about formatting tables below.

Outcome

You have inserted an empty table in your KB article. You are able to add the content you want into the table cells.

Back to top

Formatting a Table

The simplest way to adjust formatting of your table is to right-click in the table and use the Table Menu options. If you need options not available through the menus, then you can edit in the HTML Source code directly.

• Basic Formatting - using the table menus
• Advanced Formatting - using HTML source code

Basic Formatting

The simplest way to adjust formatting of your table is to right-click in the table and use the Table Menu options.

Instructions

Step 1 - Right-click in the table in the Row, Column, or Cell where you want to make the change, or anywhere in the table to adjust the overall Table Properties.

Step 2 - Choose your desired action from the context menu.

Adjust Table Properties

Table Properties brings up a similar dialog box as when creating a table. These choices affect the entire table:

• Headers (required for accessibility) - First Row, First Column, Both, or None
• Caption - type in a brief caption or title for your table which will display above the table itself. Captions are recommended for accessibility.
• Add stripes - adds light gray shading to alternate rows of the table. Automatically adjusts if you add or remove rows.
• Add hover effect - highlights a table row when the mouse pointer moves over it.
• Add border - adds 1 pixel black outline around every cell. See advanced formatting below for additional options.
• Compact style table - uses less padding and tighter spacing to display more information in a smaller area.

Note: You cannot adjust the number or rows or columns in this dialog. See next topic for how to add or remove rows or columns.

Add or Remove Rows or Columns

Under Row and Column are three options:

• Insert Row/Column Before
• Insert Row/Column After
• Delete Rows/Columns

Modify Cell, Row, or Column Properties

Under Cell are many options:

• Insert Cell Before
• Insert Cell After
• Delete Cells
• other options for merging and splitting cells, depending on context
• Cell Properties - with many sub-options that will apply to only that cell, or to a full row or column if you select Rows Span or Columns Span options.
  • Options for Width, Height, Word Wrap, Horizontal and Vertical Alignment, Cell Type, Rows/Columns Span, Background Color, and Border Color

Outcome

You are able to adjust table formatting through the right-click Table Menu options.

Advanced Formatting

Some formatting cannot be adjusted with the Table menu items. These items are usually modified by adding "styles" to table tags. For example:

Adding width="70%" and border="1px" to the style will alter the table with a width that is 70% of the article content area and 1-pixel border.

Important Notes:

• Style tags can be added at the Table level, Header level, individual cell level, or applied to full rows or columns by using a scope tag
• Style attributes should be placed inside the style quote
• You can place multiple attributes in one style quote, but remember to put a semi-colon " ; " at the end of each attribute
• Some attributes (e.g., padding) are applied to all sides (top, right, bottom, left in that order) by default
  • You can specify each side by using "padding: 10px 20px 5px 15px;" where the first number is the top padding (in pixels), the second is the right, third is the bottom, and the last number is left padding.
  • If you only want to style one side, you use directional properties like: padding-top: 10px; or padding-left: 15px;

Controlling Cell Alignment and Justification

You can control both vertical and horizontal alignment within each table cell. Simply add them to the style quotes, including the semicolon ";" at the end.

For example:   <th scope="col" style="text-align: left; vertical-align: bottom;">Description</th>

Horizontal Alignment:

• text-align: left;
• text-align: center;
• text-align: right;

Vertical Alignment:

• vertical-align: top;
• vertical-align: middle;
• vertical-align: bottom;

Back to top

KB Template - Formatted Table

We have a KB Section Template for a Formatted Table. The template inserts a table formatted with dark gray header bar, gray body, and horizontal lines (but no vertical lines).  You can then replace the cell text, add columns and rows as desired, etc. Type over the "Table Caption Here" to add your own caption text above the table.

Instructions

Step 1 - Open your KB article in Edit mode and place your cursor where you want to insert a new formatted table.

• Tip - Add a few extra blank rows and put your cursor in the middle of the empty rows. This makes it easier to see the full table. Remove the extra rows when you are finished.

Step 2 - Click the Templates drop-down in the top right of the KB Editor Toolbar. Scroll down to select Section Templates > Formatted Table

Step 3 - The formatted table with "dummy" information in each cell is inserted where your cursor was, appearing like this:

Step 4 - Replace the "dummy" text with your own content.  Add/Remove rows/columns as needed to fit your data. See more about Formatting Tables above. 

Outcome

You have inserted a formatted table into your KB article in the location you chose and are able to enter your own information into the table.

Back to top

Further Readings

Knowledge Base: Using the KB Editor Toolbars

Knowledge Base: Pasting Tables from Excel or MS Word

Need additional help?

Visit the TDx Knowledge Base (KB) category in the Knowledge Base.

To request service, report an issue, ask questions, or request training, submit a TeamDynamix Application Administration ticket - use the Request TeamDynamix Service button then choose Request Type Knowledge Base request.

Visit the Technology Help Desk Support page to locate your local campus contact information or to submit an online technology support request.  For password issues you must call or visit the Help Desk in person.  

Appendix - Table Properties Examples

• Example 1 - Modified Table Properties
• Example 2 - Default Table Properties
• Example 3 - Formatted Table Section Template
• Example 4 - Table copied from KB #4412

Example 1 - Modified Table Properties

Table Properties for Example 1 table with both header row and header column, stripes, borders, and a caption - 5 rows, 3 columns:

Image of Example 1 Empty Table in KB Editor view - 5 Rows, 3 Columns, stripes, borders, both Headers, and a caption:

Same Example 1 table with sample content filled in - 5 Rows, 3 Columns, stripes, borders, both Headers, and a caption. You see it in Reading View instead of Edit View:

HTML Source Code for this filled-in Example 1 table:

Example 2 - Default Table Properties

Default Table Properties for Example table 2 - all properties blank - 3 rows, 2 columns:

Image of Example 2 Empty Table in KB Editor view with default Table Properties - 3 Rows, 2 Columns, all other values empty:

Same Example 2 default table with sample content filled in - 3 Rows, 2 Columns, all other values empty. You see it in Reading View instead of Edit View:

HTML Source Code for this filled-in Example 2 table:

Example 3 - Formatted Table Section Template

Table Properties for Example 3 Formatted table with dark gray header row, light gray cells, bottom cell borders, and a caption - 3 rows, 3 columns:

Image of Example 3 Formatted Table from Template in KB Editor view - 3 Rows, 3 Columns, stripes, borders, both Headers, and a caption:

Same Example 3 Formatted Table - 3 Rows, 3 Columns, header row, caption, and content filled in from template - all other values empty. You see it in Reading View instead of Edit View:

HTML Source Code for this filled-in Example 3 table:

Example 4 - Table copied from KB #4412

This table is copied from KB Article #4412 - note that the anchor name and heading level are preserved here, so you can see how the HTML Source Code and the displayed table relate to each other.

Displayed Example 4 - Table from KB Article #4412:

HTML Source Code for Example 4 -Table from KB Article #4412:

Notes:

• We have added blank lines to emphasize table elements and highlighted elements that could be useful to use in your own tables.
  • Highlighting is not part of the HTML source code. 
• This table has a Caption <caption> section, a Table Header row <thead> section, and a Body <tbody> section containing four Table Data rows <td>. 
• The first two lines, with "div class" and "table class" come from the Table Properties menu as discussed in Basic Formatting above.
• You can make a Caption have a Header Level if appropriate in your article.
• You can also include anchor tags within the caption - be sure there is no text between the opening and closing anchor tags ( <a> and </a> ). 
• In the table header <thead> section, you can include settings that apply to the entire column with scope="col". The settings are in the style="" quotation marks.
  • We could have specified column width: 40%; in the second <th> tag instead of in each row's second <td> tag.
• You can add individual cell formatting in any <th> or <td> tag.
  • To prevent words from wrapping in the middle of the word, use style="white-space: nowrap" .
  • To control the width of a column add width: 40%; into the style="" attribute. Experiment with what percent width works well with your data. If you specify only a single column, the others will naturally adjust based on the width of the contents. 
  • Notice that these elements are repeated in the corresponding <td> inside each of the four Table Data <td> rows.

Back to top