Topics covered in this article:
- Table Creation
- Insert Table button
- Table drop-down menu
- Table Wizard
- Table Properties tab
- Cell Properties tab
- Table Layouts tab
- Accessibility tab
- Style Builder
Table Creation
To edit a web page on your site and add Tables to it, click on the Content icon of the desired page in the site navigation tree, from there select the zone you wish to edit by clicking on the pencil icon. In the example below in the Main1 Area zone, the What We Do - Title page will be edited to insert a table.
Once in the Content window of the page you are editing click on the Insert tab. There are a variety of options for inserting content to customize every page of your website, but in this article the focus is on Table creation.
Insert Table Button
By clicking the larger Insert Table button, a small dialog box will open and where you can enter the number of Columns and Rows needed, and values for Cell Padding, Cell Spacing, Border and Alignment. Clicking OK will create the table immediately with those parameters, if you wish to have more flexibility and control click on the All Properties button and the Table Wizard will open a dialog box with more granular control and features.
Table drop-down
Another method to create a table from the Insert tab is to click the Table drop-down which is the smaller table icon with the arrow beside it. With this method you can simply move your mouse over the grid provided to highlight the number of columns and rows needed.
Then if the table has been created and you need to perform some simple edits they can be done by clicking on the table then the arrow of the drop-down menu. When you scroll down you see the basic options for:
- insert a row above/below
- delete a row
- insert a column to the left/right
- delete a column
- merge cells horizontally/vertically
- split a cell horizontally/vertically
- delete a cell
- table properties, which opens the Table Wizard
Table Wizard
The Table Wizard can be opened two ways, one by clicking on the All Properties button and the second by clicking the Table Wizard button from the Table drop-down menu, you will be presented with the following pop-up window. Across the top are 4 tabs, Table Properties, Cell Properties, Table Layouts, and Accessibility.
Table Properties tab
As pictured above in the Table Properties tab on the left a preview of the table is shown and below it are buttons to add/delete column and rows, and adjust the span for columns and rows. The right side of the tab allows you to adjust the following:
- Height/Width - Specifies the height and width of the table(in pixels, percent or point). Note: Tables that are created pixel based Height and Width will not render on mobile, users will need to change the Height and Width to percent based for them to function properly.
- Cell Spacing - Increases or decreases the space between the borders of the cells.
- Cell Padding - Increases or decreases the space between the content and the border of a cell.
- Alignment - Aligns the table to the left, center or right side of the page.
- Back Color - Sets the background color of the table.
- CSS Class - Specifies table CSS class and style. This property should be used only by advanced users.
- Back Image - Sets an image as the table background.
The More Table Styling button will open the Style Builder dialog box, more will be covered on the Style Builder later in the article.
Cell Properties tab
The Cell Properties tab, pictured below, has features are similar to the Table Properties tab in that they allow for the control of the following elements:
- Height
- Width
- Cell Spacing
- Cell Padding
- Alignment
- Back Color
- CSS Class
- Back Image
- ID
- No Text Wrapping
You may also select the More Cell Styling button to open the Style Builder and create your own custom style for the cells.
Table Layouts tab
The Table Layout tab has options for tables styles in the Select Table Style drop-down menu on the right hand side. When a table is selected from the list you will see a preview of the layout style on the left, if this is the layout you want apply to the table click OK at the bottom of the window.
Accessibility tab
The Accessibility tab allows you to adjust the number of heading rows and columns, add caption settings, add summary and toggle on/off if the cells are associated with the headers.
Style Builder
The Style Builder as mentioned above can be opened by clicking the More Table Styling button on the Table Properties tab or in the Cell Properties tab. In the Style Builder dialog box there are a number of tabs presented along the left side that allow you to configure the following features:
- Font
- Background
- Text
- Layout
- Box
- Border
- Lists
Comments