Insert a table

This tutorial covers inserting a table, inserting table rows (see steps 10 to 14 below), and inserting table columns (see steps 18-20 below).

To insert a table on a page:

  1. Navigate to the desired page and click on Edit.
  2. Place your cursor in the main page content area and then click on the Table drop-down menu in the WYSIWYG editor.

    click on table drop-down in WYSIWYG editor
  3. Then select Table and select the desired number of columns and rows.

    click on table and select number of columns and rows
  4. You will see the table has been inserted, but its difficult to see the cells. We can change the width of the table. 

    table is inserted
  5. Ensure the table is selected and click on the Table drop down menu again and select Table properties.

    click on table and select table properties
  6. Enter the desired width, cell spacing, cell padding, border size and select the alignment.

    add properties
  7. When you are finished entering, click Ok.

    click ok
  8. You will see that the properties of the table have now changed.

    properties have changed
  9. Now you can fill in the table fields.

    fill in the fields
  10. To insert a row above, highlight the row below where you'd like your new row to be inserted and then click on the Insert row above icon.

    insert row above
  11. You will see that an empty row has been added and you can fill in the fields.

    row has been added
  12. To insert a row below, highlight the row above where you'd like your new row to be inserted and then click on the Insert row below icon.

    insert row below
  13. You'll see the row has been added below and you can fill in the fields.

    row added below
  14. Now that your table has been created and completed, you'll need to add a proper heading row.  To do this, you have to edit the source code for the table. Click on the source code icon in the WYSIWYG editor.

    click on the source code icon
  15. You will need to add the following html code for the headings just before <tbody>.

    add header code
  16. Click OK.

    click ok
  17. You'll see the table headings have been added.

    headings added
  18. To add a column, highlight the column beside where you'd like your new row to be inserted and then click on the Insert column left icon or the Insert column right icon.

    click on insert table column left or right
  19. You will see the column has been added.

    column added
  20. And you can fill in the column heading and other cells.

    fill in the column cells
  21. The last step to creating our table is to add the zebra custom style, so our table rows will be alternating gray and white. Click on the Formats drop-down in the WYSIWYG editor and select Custom > zebra.

    click on format custom and zebra
  22. When you are finished, click on the ellipsis and then click on submit.

    image

  23. You'll see that the table has been added to the page.

    table added to page