KB User's Guide - Documents Tab - Create a Table in the Design Mode (WYSIWYG) Editor

Collect the Data You Want in a Table

Have all your data in one place. Ideally, all your data will be in a digital format.

Best Practices:

• Sometimes, when copying data from the web sites or other word processing applications, extraneous code or odd glyphs that are the direct cause of formatting problems may also be copied into the Design mode. Please use a data cleaner, like HTML-Cleaner, or copy and paste data into a text editor and save it as a *.txt document.

• Sketch out a draft of your table and determine the number of columns and rows you would like to see.

Create a Table

1. Create a solid introductory/ explanatory paragraph that explains the content of your table.

2. Place the cursor where you would like the table to appear.

3. Click on the table button.

   

Explanation of Table Properties

When you click the Table button, you will be presented with several options for creating the table. The options are as follows:

• Rows - Determines number of rows in table. This field defaults to 4.
• Columns - Determines number of columns in table. This field defaults to 4.
• Table width - The width of the table, in percentage or pixels. This field defaults to 100%.
• Table background - The color the table will display in. White is the preferred color. The drop down menu displays colors and corresponding hex color code. This field defaults to the selection of Not Set.
• Table border width - The width of the table border, 10 being the thickest. This field defaults to 1.
• Collapse Check Box - This property sets whether the table borders should be collapsed into a single border. This field defaults to an unchecked check box.
• Table border style - The border of the table; solid, dashed, dotted and double. This field defaults to Solid.
• Table border color - The color the table border will display in. The drop down menu displays colors and corresponding hex color code. This field defaults to the selection of Not Set.
• Table alignment - The alignment to which the table will display in a document. Choose from Left, Right, or Center. This field defaults to Not Set.
• Cell data alignment - Determines the alignment of text or other information in each table cell. Options are Left, Center, and Right. This field defaults to the selection of Not Set.
• Cell padding - The space between the cell edges and the contents of the cell. This field defaults to 1.
• Cell spacing - The space between the cells of the table (also effects the distance between the cells and the table edges).This field defaults to 1.
• Cell border width - The width the cell border will display in. The drop down menu displays numbers 0 through 10. This field defaults to Not Set.
• Cell border color - The color the table border will display in. The drop down menu displays colors and corresponding hex color code. This field defaults to Not Set.
• Cell border style - The border of the table will display in; solid, dashed, dotted and double. This field defaults to Not Set.

Entering Data in the Table

1. Click on the Table button and carefully complete the pop-up Table Properties form.

   • Note: Please know that the data you enter in the cells are limited to the properties you enter into this form. So, in this case, "What-You-See-Is-What-You-Get" is misleading. If you have large images in the cells of your table, the images appear to be the widest column of your table when you are in the Design Mode Editor.  However, to see what your table restrictions have done to the entered image and content, either click on the Preview button and then click on the Internal View or External View link.

2. In the image below, the Table Properties form was completed with specific parameters and the Insert table button is circled in red on the lower right.
   
   

3. An empty table will appear in the document.

4. Begin entering data in the table. Please save your changes with frequency. In the event you make an error, you can restore your document to a previous version.

Make Adjustments to the Table

1. Format the content: bold columns and rows, add italics and other formatting to text.

2. Adjust image sizes: if you are editing the document in Firefox, you may easily edit the image sizes in the Design/ WYSIWYG editor by pulling on the anchor buttons. In the image below, the anchor fields are circled in red.

   

   As you hover your mouse over the anchor button, the cursor will become a two-headed arrow. Drag the anchors until the image is at its desired sized. The image below shows the two-headed arrow cursor circled in red.

   

3. Please Use Caution Adjusting the Column width: If you click onto a cell in the table, the anchor buttons appear. Should you pull the appropriate anchor button, a row is the width can be altered. In the image below, the anchor button in the Description Row is circled.

   

Adding Columns to an Existing Table

1. To add a new column, place your cursor inside the text field of the desired column so that the Anchor/ Delete buttons appear. The image below shows the Description column with Anchor and Delete buttons circled in red and labeled. Please be very careful NOT to click on any buttons with an x as you will delete that column or row.

   

2. Click on the Insert column right button. Just hover over the table buttons until you see the appropriate tool tip message.

   

3. The column will appear on the right. In the image below the column is very narrow and is circled in red. Place your cursor in each of the fields and populate as you see fit.

   

Deleting a Table

In the WYSIWYG editor, the most efficient way to delete a table is by deleting column by column. Place your cursor in the top row / left column of your table, the anchor and delete buttons will appear. In the image below, the red arrow points to the delete column button. Click on that button to delete the column. Repeat this until the table has been deleted.  In the HTML editor, just delete everything between the table tags.