Creating a New Table
On the last bar of the WYSIWYG editor, there are multiple buttons designated for tables. Clicking on "Insert/edit a table" will bring up a pop-up allowing you specify settings for your new tables. The first two fields allow you to specify the number of columns and rows.
Below Columns and Rows are settings for Cellpadding and Cellspacing. Cell spacing is the amount of space, in pixels, between the table cells where Cellpadding is the space between the cell border and the cell contents. Cellspacing is not needed to make your tables look nice, so a value of "0" works well here. Cellpadding, on the other hand, should have a value around "5"-"8" pixels for optimal visual results.
Under the Cellpadding is a drop down for alignment. This allows you move your table to the left, center or right of the content area. Of course, if you've set the width to 100%, then all three of these values will display the same. The Border field allows you to set the border size. In most cases, a width of "1" pixel will make your table display nicely. If you want the table to not have any borders, then set this value to "0" pixels.
After the Alignment drop down, you can set the width and height of the table. The width attribute is required and can be set in either pixels or percent. By setting the width to 100 percent (place "100%" in the width field), the table will expand to cover the whole content page, while setting it to 80 percent will make it expand to 80% of the content area, and so on.
At the bottom of this pop-up are two additional fields: one for "Class" and other for "Table caption." These help describe the content in your table. Caption is used as an explanation of your table and is displayed above your table. Summary should summarize your table and is not displayed. However, both of these values are use by screen readers and other devices and important to include to increase the accessibility of your table. (See more about table accessibility)
The Advanced tab should only be modified by advanced users with knowledge of HTML and styling.
Working with an Existing Table
To modify your table, you can use the provided buttons. You can press the "Insert/edit a table" button to edit the selected table. If you wish to change a row or cell, press "Table row properties" or "Table cell properties." Either one of these till open a new pop-up where you can modify the settings.
Row
After clicking on row properties, you will see a new pop-up. The "Row in table part" has 3 options: Table header, Table body (Default), and Table foot. Table header acts like text Heading, increasing text size. Table body is default text, and Table foot designates the last row for styling. Alignment sets the horizontal text position inside the row's cells. Vertical alignment sets the vertical position of the text inside the row's cells. Class is used in CSS and is recommended for advanced users. The height field allows you to specify the height of the cell in pixels. Right above the "Update" button, there is a drop down with 4 options:
- Update current row
- Update odd rows in table
- Update even rows in table
- Update all rows in table
The Advanced tab should be used by advanced users with knowledge in HTML and styling.
On the table bar, there are 3 buttons for table editing: "Insert row before," "Insert row after," and "Delete row." You can use these buttons when you select a row in your table, allowing you to insert rows before and after your selection, or just simply delete a row.Cell
Clicking on the "Table cell properties" button will open a different, but similar, pop-up like the row pop-up. Alignment sets the horizontal text position inside the cell. Vertical alignment sets the vertical position of the text inside the cell. The "Cell type" field has two options. Data is the default text, and Header changes the font of the cell. The "Width" and "Height" fields allow you to specify your cell dimensions. "Class" is used in CSS and is recommended for advanced users. Right above the "Update" button, there is another drop down with 3 options:
- Update current cell
- Update all cells in row
- Update all cells in table
The Advanced tab should be used by advanced users with knowledge in HTML and styling.
Column
On the table bar, there are 3 buttons designated for column editing: "Insert column before," "Insert column after," and "Delete column." You can use these buttons when you select a column in your table, allowing you to insert columns before and after your selection, or just simply delete them.
Merging
On the table bar, there are 2 buttons on the end for cell editing: "Split merged table cells" and "Merge table cells." You can split a larger cell into smaller individual cells and also combine multiple cells into one.