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:

    • 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.

      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

      • 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.

      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




    Keywords:process identify audience activity relevance purpose scope prerequisites prereq responsibilities   Doc ID:52049
    Owner:Leah S.Group:KB User's Guide
    Created:2015-06-08 11:47 CDTUpdated:2022-06-27 15:19 CDT
    Sites:KB User's Guide
    Feedback:  0   0