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

This document is specific to the Classic Editor, which is being retired. We recommend trying these steps in the TinyMCE if possible. Please browse our documentation on TinyMCE for help.

Please use this document as a reference for making very basic tables in the Design/What-You-See-Is-What-You-Get (WYSIWYG) Editor. There are limitations to tables created in the WYSIWIYG/ Design editor. There is much, much more flexibility using the HTML 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:

    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.

      Screenshot showing the editor toolbar with the table button circled.

    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:

    classic editor table properties screen

    | KB User's Guide - Workflow Documents |

    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.

      Image of the Table Properties form

    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.

      Image showing the anchor buttons that appear as small white squares at the corners of a selected image

      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.

      Image showing the diagonal arrow cursor that appears when you hover over an image anchor
    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.

      Image showing the column anchor, which appears as a small white square on the side of a selected column

    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.

      Image showing the insert and remove buttons, which appear on the top and sides of a selected table cell. They include a left and right facing arrow, as well as a circle with an X
    2. Click on the Insert column right button. Just hover over the table buttons until you see the appropriate tool tip message.

      Image of the "insert column right" button in the editor toolbar
    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.

      Image of a table with a newly inserted column

    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.

    Image of the remove column/row button, which appears as a circle with an X on the side and top of a table cell when you select it.

    If you have any questions about your table, please contact the KB Team at kb-team@lists.wisc.edu

    Much thanks to the Conservation Institute!